Firefox background image horizontal centering oddity

Question

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large background images, the whole thing becomes visible.

My current screen resolution is 1280 x 1024.

If I do the following:

• Specify a background image that is 1400px wide
• Specify "position" as "center center" (horiz. / vert.)
• Specify "stretch page width to background image width"

then in FF, the following happens:

• the page is correctly stretched to 1400px. I get a horizontal scroll bar as my screen is smaller than that. So far so good.
• and now the bizarre thing: the background image is not centered relative to the 1400px, thus showing the full image, but relative to my viewport of 1280px, hiding a part of the image beyond the left edge of the screen, and leaving a white stripe to the right instead of showing the whole image.
• There are no additional elements (DIVs, wrappers...) that could manipulate anything. All settings are directly in the body.

Update: IE does it correctly. Google Chrome has the same problem.

It is as if Firefox first renders the background image at 100% width, centers it, and then notices that the body needs to be stretched to 1400px.

Is this normal Firefox behaviour? Any ideas what I can do?

Posting a link would be a bit cumbersome as it's all in a closed development environment but if all else fails, I will put something together to look at.

The CSS:

body 
 {
 background-image: url(http://www.domain.com....image.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 min-width: 1400px;
 height: 100%;
 }

Answer 1

You're being bitten by a quirk of the CSS specification: thanks to section 14.2 , any background image you apply to the body element becomes the background to html instead. (This was intended so that authors could carry on using background on the body tag where they expected it to be from pre-CSS browsers.)

In IE, html represents the whole document canvas and expands to fit the enlarged body width. In other browsers it acts like any other display: block element and keeps the viewport width regardless of what you put in it. The other browsers are arguably more correct here, but the CSS spec is not terribly clear on the topic, and the upshot is that the results in IE more closely represent the wording of 14.2 about the canvas. Either way, it's not really specified reliable behaviour.

You can get consistent results across browsers by setting the width and background on html instead of body . (Remember to use Standards Mode in IE.)

But a 1400px fixed-width document? Sounds like a really bad idea.

Answer 2

try adding:

width: 100%;
display: table;

to the body tag style (also, background-attachment: fixed; might be required)

Answer 3

the background-position should be left top; did you set

body{
margin:0;
padding:0;
}