» Firefox and Opera background-image bug?

Firefox and Opera background-image bug?

Update: Fixed! Scroll to the end of the article to see how to fix this.

Large centered bg image + Firefox + 800×600 resolution = trouble.

Ok, let’s say my website has the following CSS code for the body:

background: #000000 url(img/bg.jpg) top center no-repeat;

That’s a black background with a centered image on the upper side. The “center” part should mean that the middle of the image will be in the middle of the browser’s view port. That’s pretty straight forward and looks as it should in any browser with CSS support.

Except in Firefox and Opera on a low enough resolution, or if the browser’s window size is small enough the background image starts going left at a certain point! Works fine in IE.
If you’re on Firefox or Opera, go ahead… resize this window making it narrower and narrower. You’ll see the VileWorks logo going left. Now scroll right to see how the design broke apart Update: not anymore.

Usually, when something works on Internet Explorer and doesn’t work in Firefox it’s somehow my fault and the fact that it works ok in IE is an IE bug. But I can’t see how the above code couldn’t be correct. And it doesn’t just happen to me, I’ve seen this on a lot of sites with large, centered, no-repeat background images. All of these designs break somehow on a (for example) 800×600 resolution.

Update:

What I did was I added the last two properties to the body element in the stylesheet:

body {
    background:#000000 url(img/bg.jpg) center top no-repeat;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size:14px; line-height:20px;
 
    /* These two: */
    display:table;
    width:100%;
}

7 Comments.

7 Comments

ben
7 months ago #
```
display:table;
width:100%;
```
Those two lines just made my day.

Thank you!
Stefan
7 months ago #

I can imagine what you mean Ben, you’re welcome.
Bert
7 months ago #

This is not a bug. It is perfectly valid CSS standard behaviour (that is probably why IE gets it “right”; because it is getting it wrong).
I wrote a short article about it:
http://www.yuvalik.org/2008/10/background-roots/
gopher
3 months ago #

I love you!!!
Susan
4 weeks ago #

Whew! That’s been bugging through about 3 websites. Thanks for this!

@bert – it may be valid CSS behavior, but its really screwy behavior that in my 5 years of programming CSS I’ve never heard of.
Matt - Utopie - Liverpool
2 weeks ago #

Ohhhh Myyyyy Godddddd… I have a BG image aligned to the bottom of my page (body), and in Opera it was just aligning to the bottom of the fold, so when you scroll down the bg image was just stuck where the fold was. THIS FIX THAT !!!!

Thank you, Sir…
Wout
2 weeks ago #

Awesome! Been looking for this solution for a long time! Thanks a lot!

Vile Works