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

Figure 5-3: Showing the two images fi xed to the viewport.
Note how the images are in the top let of the window even though the page has been scrolled
down most of the way to the bottom of the content. Again, they're fixed with respect to the
viewport. h ey literally can't move, ever.
162
h us the complexspiral demo. It takes two images of equal size, whose contents line up with
each other, and puts them together so that you can see one overlapping the other where its
element exists and coincides with the placement of the image. h at's why you see the rippled
shell in the main div , but the unrippled shell in the body background around it. h e div 's
background image isn't aligned with its top-let corner, but the viewport's top-let corner. You
only see, as in Figure 5-4, the parts of it that intersect with the div itself.
Now, suppose you wanted to create a third distortion ef ect for the headings in the content.
All you need is another image—such as Figure 5-5.