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%;
}

14 Comments.

14 Comments

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

Thank you!
Reply
Stefan
1 year ago #

I can imagine what you mean Ben, you’re welcome.

Reply
Bert
1 year 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/
Reply
gopher
1 year ago #

I love you!!!
Reply
Susan
1 year 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.
Reply
Matt - Utopie - Liverpool
1 year 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…
Reply
Wout
1 year ago #

Awesome! Been looking for this solution for a long time! Thanks a lot!
Reply
Stacey
10 months ago #

YOU ARE A GENIUS!!!!
Reply
Jeff
6 months ago #

@Bert:

A css attribute designed to present a background graphic is intentionaly designed to not show it? Wow, I must have gone to the wrong school.
Reply
Jeff
6 months ago #

Didn’t work for me. Why should it be so hard to make something that should be simple, happen. I have not found a solution anywhere. My site is on angelfire, and they add on a lot of code (bad code at that, a css validation brings up a full page of errors and warnings)maybe thats the problem.
Reply
Anna
5 months ago #

OK, I dint understand it how, but these two lines solved my problem! Many thanks:):)
Reply
Stefan
5 months ago #

@Anna: Don’t worry ’bout it, I didn’t understand it either…

Reply
Shahab Khan
2 weeks ago #

THANK YOU,
THANK YOU,
THANK YOU.

YOU ARE A GENIUS!!!!
Reply
Volly ]]
2 weeks ago #

Hi,
i had the same problem. I found another solution (and maybe the reason).
Try:

html, body {

[[your background css]]

min-height:100%;

}

Opera use another initial declaration for “height”. Also you need to declare for “html” AND “body”.

greatings from germany
Reply

VileWorks