Re: [Solved] Background/wrapper div displaced in Firefox

[immel]

Solved the problem by adding the background image to the wrapper (thanks, TheDoc) as well as the background. That way, when the browser window is resized, the image of the div will hide the displacement of the background image entirely, as long as the height of the page content is more than 800px (which wont be a problem).

Code:

body {
font-size: 62.5%;
font-family: Geneva, “Lucida Sans”, “Lucida Grande”,
“Lucida Sans Unicode”, Verdana, sans-serif;
color: #FFFFFF;
height: 100%;
[b]background: url(images/bg.jpg) top center no-repeat black;[/b]
}
#wrapper {
width: 928px;
margin: 0 auto -250px;
min-height: 100%;
height: auto !important; height: 100%;
[b]background: url(images/bg.jpg) top center no-repeat black;[/b]
}

If a browser window is resized below page content width, what Firefox/Chrome/Safari does to top center backgrounds is to keep them centered, no matter what, based on your browser window width. This results in that, if you have any kind of width on your page content, the content will remain in position but the background image will be displaced and only one side of the image will be pushed outside your browser window, while the other side can be seen by scrolling. But IE will keep the background centered, no matter what, in relation to your page content, which seems more logical to me, but I might have overlooked some fundamental use of how FF/C/S handles this.