EFFECTS - CSS: Professional Techniques for Modern Layout - page 187

Now imagine what happens to the icicles as the browser window (and therefore the body ) is
made narrower. h e icicles will shit let ward as compared to the page's layout, of course, as
the 75% point in the body moves let ward. If the window and body are then made wider, the
icicles will shit rightward.
Now consider what will happen if the horizontal placement of the image is changed to 50%.
h at will center it in the body , and its rate of movement will be lower than when it was at
75%. Take it all the way down to 0%, placing it against the let edge of the body , and it won't
move at all (when compared to the overall page layout) as the body resizes.
Now suppose you have two backgrounds, one let -aligned and the other at 75%, and both are
horizontally repeated (see Figure 5-43). For example:
body { background : url(ice-1.png) 0 0 repeat-x ; width : 100% ;
padding : 0 ; margin : 0 ;}
div#main { background : url(ice-2.png) 75% 0 repeat-x ; width : 100% ;}
189
Figure 5-43: Two sets of icicles.
A lovely layered look. More to the point, though, as the window is made narrower or wider,
the icicles on div#main will slide past the ones on the body . h at in itself is potentially
interesting, but take it one step further and shit the body 's background so it isn't let -aligned.
body { background : url(ice-1.png) 25% 0 repeat-x ; width : 100% ;
padding : 0 ; margin : 0 ;}
div#main { background : url(ice-2.png) 75% 0 repeat-x ; width : 100% ;}