Background image disappears in FireFox and Opera

But Works Fine in IE

[strawbs]

Hi There,

I am using the following line of code to style my "container" div in my style sheet:

#container {
background: url(images/bg_container.gif) repeat-y top center;
}

But this is only working for IE. I can't see the background image at all in FireFox and Opera. I have tried the following as well which has the same result:

#container {
background: url(http://www.myURL.com/images/bg_container.gif) repeat-y top center;
}

When I try this:

#container {
background: url(../images/bg_container.gif) repeat-y top center;
}

The image is lost from all browsers. Has anybody come across this before or is aware of a fix?

Thanks

[D_Blackwell]

Looks fine in all three to me.

When I try this:

#container {
background: url(../images/bg_container.gif) repeat-y top center;
}

The image is lost from all browsers.

A bad file path is my first guess.

[strawbs]

Yes, but if you take the "../" out before images the background shows in IE only. So the file is there

[strawbs]

I have even tried putting the full URL in including the [www....] bit. That again works in IE but not FF or Opera.

[Ingolemo]

Are there any other styles that are applied to #container that could be usurping this?

[jessejump]

Is there some HTML in your stylesheet?

[bedlam]

A guess: the element you've applied the background image style to is floated.

If so, IE will incorrectly enclose un-floated child elements in this element, giving it (the floated element) a non-zero height, and therefore showing the background image.

In standards-compliant browsers a floated element will (correctly!) fail to enclose child elements unless they are floated or (possibly) unless you've fiddled with the 'overflow' property of the floated element. This often means that the floated parent element has a computed height of zero, and so your background image does not appear.

-b

[willybfriendly]

What happens if you use the background-image property instead?

#container
{
background-image: url(images/bg_container.gif) repeat-y top center;
}

WBF