Drop shadows

The following image shows a page with a content area and drop shadow.
This

 

This effect was achieved by creating the depicted background image and tiling it vertically.
In the body rule, the position was set to 50% 0 in order to position the background centrally
on the horizontal axis. The background color of the web page is the same as the solid
background on the image itself, and so the image and color seamlessly blend.
body {
background: #878787 url(background-drop-shadow.gif) 50% 0 repeat-y;
}
Regarding the white area of the image, this is 536 pixels wide. This is because the wrapper
div’s width was earlier set to 500 pixels, and its padding value was set to 18 pixels. As you
will remember from the box model information from the previous chapter, padding is
added to the dimensions of a box, and so the overall width taken up by the wrapper div
is 536 pixels (18 + 500 + 18 = 536).