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

Now as the browser window changes size, both sets of icicles will shit , but at dif erent rates of
speed. In fact, the body icicles will move at one-quarter the speed of the size change, and the
div#main icicles will move at three-quarters that speed. h us, if you resize the window at a
speed of 12 pixels per second, the body background will shit at 3 pixels per second, and the
div#main background at 9 pixels per second.

h erefore, if you want the background to move faster than the speed of the resize, you would
give the horizontal of set a percentage value of greater than 100% . Shit ing the image at twice
the speed of the resize would call for a background-position value of 200% 0 , assuming
you wanted the image along the top of the body . Along the bottom, the value would be 200%
100% , and centered vertically in the body it would be 200% 50% .

Now for the bit that can give you a real parallax feeling: You can make the images move
opposite to the direction of the window resize by using negative percentages.

h us, instead of having the background shit right as the window gets wider and let as it gets
narrower, you can have the opposite ef ect. For example:

body { background : url(ice-1.png) -75% 0 repeat-x ; width : 100% ;
padding : 0 ; margin : 0 ;}
div#main { background : url(ice-2.png) 75% 0 repeat-x ; width : 100% ;}

With this setup, the icicles will seem to move away from the window center as the window
gets wider, creating sort of a “zoom in” illusion; as the window is narrowed, the icicles will
move toward the center, appearing to “zoom out.”

190

RAGGED FLOATS
One of the things on many a designer's wish list is the capability to l ow text along irregular
shapes instead of the boring boxes they deal with every day. Well, it's not only possible, but it's
also pretty easy and reliable, albeit at a markup cost.

Say you want to l ow your text along a gently sloping curve, as in Figure 5-44.