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%;
}
Those two lines just made my day.
Thank you!
I can imagine what you mean Ben, you’re welcome.
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/
I love you!!!
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.
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…
Awesome! Been looking for this solution for a long time! Thanks a lot!
YOU ARE A GENIUS!!!!
@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.
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.
OK, I dint understand it how, but these two lines solved my problem! Many thanks:):)
@Anna: Don’t worry ’bout it, I didn’t understand it either…
THANK YOU,
THANK YOU,
THANK YOU.
YOU ARE A GENIUS!!!!
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
Great!
It works!