Reputation: 13527

IE and Transparent Backgrounds

I have the following css:

body {
     background-image: url(images/background.jpg);
     background-repeat: repeat-x;
     background-color: #99ccff;
}

Unfortunately, any div created on this page, now automatically has this colour. None of the following works if applied to any divs on he page (it still takes on the above colour.

bacgkround: none;
background: transparent;
bacgkround-color: none;
background-color: transparent;

Anybody know how to get around this (in IE)? i.e. How do I make the div transparent or NOT have a background color?

EDIT: I've uploaded a screenshot here: http://www.namhost.com/bgtrans.jpg Basically, the background is a gradient image that changes from DARK blue, to the light blue that is the background. In firefox, the area that says bradd pitt, is transparent and you dont see the blue outline. However, in IE, you see what you see in that screenshot.

Here's a screenshot of what can be seen in Firefox: http://www.namhost.com/bgtransfirefox.jpg

Upvotes: 1

Answers (5)

rahul

Reputation: 187020

Your assumption of background color seems to be wrong.

Making a background transparent means you will get the background of the underlying element. I think in this case its your body element. Since you have set a background color for the body tag all the element with background color transparent will show the body's background color.

Edit:

After reading your comment to the above answer I would like whether the image path is shown and the image width and height cover the whole body element.

Upvotes: 1

Yonatan Karni

Reputation: 977

not sure what you expected. I get consistent behavior in firefox and IE for this code:

<html>
<style>
body
{
    background: green;
}
.a
{
    bacgkround-color: none;
}
</style>
<body>
<div class="a">hello</div>
<div>world</div>
</body>
</html>

if this is a more complex scenario, did you use debugBar to check the applied style, or at least FireBug on firefox to see what is actually applied?

Upvotes: 0

Mauro

Reputation: 4511

not sure whats going wrong here (if anything is going wrong at all), transparent and none mean that the div shouldnt have its own colour and therefore you will see through the div to the background of the parent container....if none of the parents have a colour then you will see the background of the body/page

Upvotes: 2