I'm new at creating sites using CSS, and I've always wanted to put a cool looking shadow around the edges of my web page (I usually work in fixed widths - normally 800 px wide).

I've looked at a few sites that do this and notice that most have a small background graphic, but how do you place it? Can anyone point me to a step-by-step tutorial (I'm as dumb as a rock).

Thanks!

photoshop tutorials
best home page
amrusi
hair remove

Not sure if/where there are any tutorials, so I'll just do a quick one myself. I'm just glad you use fixed width, this gets quite a bit more complex with fluid/elastic.

First off, you need to create the shadow images in a graphics package. I've written this for an 800px with page, the images would be obviously need to be different widths on pages of different widths

Say you want a 10px wide shadow:
Create an image, 21px by 21px with a radial/sunburst background gradient, graded from black 50% opacity in the center to black 0% opacity at the edge to create a circular shadow.
Create a new image, 800px wide by 1px high with transparent background.

Change the canvas size of the circular shadow image to 10px wide by 1 px high, centre left. Select and copy this image and paste it so it occupies the leftmost 10px of the 800px wide image (it's easier if you zoom in to place it correctly).
Return to the shadow image, and flip it horizontally. Copy and paste to the rightmost 10px of the 800px image.
Save the 800px image as shadow.png (IMPORTANT: for the body background to be visible through the shadow, all shadow images must be saved as truecolor .png files. Other formats would lose the alpha transparency).

Now create another new image, 1px wide by 10px high with transparent background.
Return to the shadow image, and rotate it 90 degrees counterclockwise. Copy and paste to the 1px wide image.
Resize the 1px wide image to 780px width to stretch the shadow to that width, then change the canvas size to 800px width so you end up with empty 10px squares at both the left and right edges.

Return to the shadow image, and undo all the changes you made to it, so you're back with the circular shadow, then change the canvas size to 10px wide by 10px high, top left.
Copy this image and paste it into the 10 by 10 square at the left edge of the 800px by 10 px image.
Return to the shadow image, and flip it horizontally. Copy and paste to the 10 by 10 square at the right edge.
Save this image as shadowtop.png

Now flip shadowtop vertically, and save as shadowbottom.png

Upload the 3 image files into your images folder. Now for the code.

CSS

#pageArtTop {
    height: 10px;
    background: url(images/shadowtop.png) no-repeat center;
}
#wrapperArt { 
    background: url(images/shadow.png) repeat-y center;
    padding-left: 10px;
    padding-right: 10px;
}
#pageArtBottom {
    height: 10px;
    background: url(images/shadowbottom.png) no-repeat center;
}

Put the following code within whatever element has the page width definition, immediately after the opening tag.

<div id="pageArtTop"></div>
<div id="wrapperArt">

Put the following code within whatever element has the page width definition, immediately before the closing tag.

</div><!-- end #wrapperArt -->
<div id="pageArtBottom"></div>

Hope this helps. Good luck!

Kelpie has offered you a solution for all browsers. But you might consider to learn some CSS3. It may be not very useful for now (only new browsers render some CSS3 proprieties) but you can easy render shadows and gradiend and rounded corners widthout addionala images, tag elements or js.

CSS3 will do the trick, but the box-shadow property is not fully supported in all browsers - especially IE.

That whole long tutorial for a shadow is way more work than necessary though.
In Photoshop, create a horizontal 'slice' of your page background that INCLUDES the shadow on the left and right side, and it doesn't have to be very high.

In the css, set that graphic as the background for the div that holds your main page section and set it to repeat-y (vertically).