Hi All,
I have a transparent logo for which i want to apply a background color how can i do so using css?
+3
A:
Simply use background-color on your element as such:
<img style="background-color: #F00;" src="my_transparent_logo.png" />
If you do not want to do it inline, you can assign it an ID (or class) like such:
<img id="logo" src="my_transparent_logo.png" />
and in your external CSS file do the following:
#logo {
background-color: #F00;
}
Andrew Moore
2010-02-05 05:37:27
I wish I had thought of that.
Anonymous
2010-02-05 05:48:11
A:
Assuming an element with an id attribute with the unique value "logo",
#logo { background-image: url("foo"); background-color: #F00; }
Anonymous
2010-02-05 05:37:50
-1: Why use `background-image` for something that clearly isn't a background?
Andrew Moore
2010-02-05 05:39:07
@Andrew: Thank you. I made an assumption that the OP wanted to do something useful. You're also right that there would be no way to make use of a background image here. We are not allowed to insert background images behind other images, and even if that worked, it would serve no purpose. It is clear the OP is proficient in CSS, so this information would only serve to confuse the issue, rather than provide an alternate implementation without muddying the main solution. I have never used this combination of properties, and I obviously have never tested it. The question was specific.
Anonymous
2010-02-05 05:47:47
A:
Here is another resource for when you are applying background properties through css: http://www.w3schools.com/css/css_background.asp
my thought though is that if you want the image to have a background color, this could defeat the purpose of using a .png so it might be better to convert the .png into a .jpg with the background color added into the image itself. Then you don't have to worry about browser compatibility with transparency --- of coarse it just depends on what your goal is.
VUELA
2010-02-05 05:44:04