The divs below named #wrapper
and #centered
use both the same background image, a transparent gif with black lines and black dots. The background images are centered horizontally using background-position: center 0
. You could use other methods such as background-position: 50% 0
and it would produce the same effect.
The two divs are nested, with the inner div centered using margin: 0 auto
, forcing the outer one to expand to the width of the body. One could take out the outer div and move its properties to the body tag and the same behavior would be experienced.
When resizing the browser window, the background images should remain properly aligned. Firefox 3 will misalign the background images at certain resolutions - most likely due to a rounding bug for placing horizontally-centered elements.
To prevent the rounding bug, one has to add margin-left: 0.5px
to the outer div. If your issue occurs with body and a div, then change your code to two nested divs.
<div id="wrapper"><div id="centered"></div></div>
<div id="wrapper-fixed"><div id="centered"></div></div>
<style type="text/css" media="screen">
/*<![CDATA[*/
#wrapper {
background: url(centered-background.png) 50% 0 repeat-y;
}
#wrapper-fixed {
margin-left: 0.5px;
background: url(centered-background.png) 50% 0 repeat-y;
}
#centered {
background: url(centered-background.png) 50% 0 repeat-y;
width: 800px;
margin: 0 auto;
height: 140px;
}
/*]]>*/
</style>