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.Some additional markup is needed, due to this method requiring two background images:one for the wrapper div (because, as per the white background in the “Adding a background pattern” section, you want the content area’s background to stop when the content
runs out) and one for a shadow for the bottom edge of the wrapper div (otherwise
the shadows at the side will just stop dead, resulting in something like what’s shown in the
following image).

 

Finally, the contentFooter div needs styling. Its height is defined on the basis of the
height of the background image (which is a slice of the Photoshop document shown in the
following image). The background is applied to the div in the same way as in previous
examples.
One major change, however, is the use of negative margins. The contentFooter div is
nested within the wrapper, which has 36 pixels of horizontal padding. This means that the
contentFooter div background doesn’t reach the edges of the wrapper div by default,
leaving whitespace on its left and right sides. By using margins equal to the negative value
of this padding, the div can be “stretched” into place.
.contentFooter {
height: 20px;
background: url(background-drop-shadow-2-footer.gif) 50% 0;
margin: 0 -36px;
}
As you can see, the horizontal value for margin is -36px, the negative of the horizontal
padding value assigned to #wrapper. The addition of all these new rules results in the following
image (which also shows the Photoshop image and exported GIF that makes up the
background).In terms of markup, add an empty div, as shown in the following code block:
? accumsa'n eu, blandit sed, blandit a, eros.</p>
<div class="contentFooter"><!-- x --></div>
</div>
</body>
</html>
In CSS, for the drop shadows flanking the content area to stop where the content does,
they need to be assigned to the wrapper div, not the web page’s body. Therefore, you
need to amend the body rule, removing the link to a background, but retaining the color
setting:
body {
background: #878787;
}
The #wrapper rule needs updating in two ways. First, the new background image needs to
be applied to the div—hence the new background property/value pair. However, because
the drop shadows are now shown within the wrapper div, it needs to take up more horizontal
space. Since the dimensions of the div’s content don’t need changing, this is
achieved by increasing the horizontal padding value. Also, because padding at the foot of
the div is no longer required (the contentFooter div effectively takes care of padding at
the bottom of the content area), the bottom padding value needs to be set to 0. These
padding values are done in shorthand, as per the method outlined in the “Working with
CSS shorthand for boxes” section earlier in this chapter.
#wrapper {
padding: 18px 36px 0;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 500px;
margin: 0 auto;
}

 

padding: 0 36px;
margin: 0 auto;
}
In order to ensure the background of the wrapper joins up with the shadow on the
contentFooter div, a single pixel of bottom padding needs to be applied to the #wrapper
rule:
#wrapper {
padding: 18px 36px 1px;
background: url(background-drop-shadow-2.gif) 50% 0 repeat-y;
width: 500px;
margin: 0 auto;
}An alternate method for getting this effect would be to place the contentFooter div outside
of the wrapper and then use the same method of aligning it:
.contentFooter {
width: 500px;
height: 20px;
background: url(background-drop-shadow-2-footer.gif) 50% 0;