friendsofed.com/downloads.html), named
backgrounds-default.html and backgrounds-default.css.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
50
Drop shadows
The following image shows a page with a content area and drop shadow.
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).
A drop shadow that terminates with the content
In the previous example, the white background of the content area is part of the image.
Therefore, if you remove most of the paragraphs in that example, the background stays as
it is, tiling vertically to the height of the viewing area. Using a different method, you can
instead have the background terminate with the content.
Note that if you remove many of the paragraphs from the web page, the white background
color ends with the content, since in CSS a container??™s size by default only
stretches to that of its content.
Pages:
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116