Figure 10-23. The image placed above the content

To the div element, set the image alignment to the
left so that text wraps around the image. Next set the background
image of the drop shadow in two background properties. In the first
background property use an image with an alpha transparency like PNG:

As for the image itself, set the margin-right and margin-bottom
properties to define how much of the shadow drop shadow image shows
through. Also set a border property as well as padding to create a
more dramatic effect:

Discussion

The first step is to create a drop shadow image in your image-editing
program like Adobe Photoshop. It's best to create a
background image sized 600 pixels by 600 pixels or larger. With the
image that large, this technique can accommodate almost any image
used in a web page.

The first image background property uses the
!important rule to display the PNG
file as the drop shadow. By using the PNG, the background color or
image of the web document can be changed without affecting the drop
shadow. For the other browsers that don't support
this rule, like Internet Explorer for Windows,) go to the next
background property and use the GIF image as the drop shadow instead.

The margin-left and
margin-bottom property in the image element
control the distance the drop shadow image appears out from the
image. If your drop shadow distance on the right or left side is
larger than five pixels (like the one used in this Solution), change
the value accordingly.