VileWorks

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.

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