We help IT Professionals succeed at work.

Create a Drop Shdaow On A Web Page

Medium Priority
Last Modified: 2010-04-21

Could someone tell me a quick and painless way of creating a drop shadow around the content area of a webpage so that it appears as if the webpage is floating /hovering on the background .

This is a nice effect that also gives a 3d look to the entire website

Watch Question


Scot again....what image editing program are you using?  If you're using fireworks, you can use the Drop Shadow filter on the main object.  You can then either output the background by itself as an image to be loaded as a no-repeating background...or you can get complicated and use CSS to create borders with tiled images.


I have both Photoshop cs2 & Fireworks.
Would the no-repeat background image not be too large of a file and slow my website down?
I know some CSS and understand the concept of  creating a 1 px high image with the marquee tool.

What I don't get is how I get my content area drop shadow to be centred on my page.
I tried the first method you suggested (output the background by itself as an image to be loaded as a no-repeating background.) but How do I get the content area to be centered??
As long as the background image isn't too complicated, then you probably won't run into an issue.  They key is to output the no-repeat image as a .jpg or .gif that isn't too large.  If the image is say 900px wide and 770 px high, you can create your page content in a table that is 880 px wide and 750 px high and center the table.  You can also use the css margin-top and margin-bottom attributes to keep the table content within the span of the image.

If you don't want to use the straight background no-repeat image, you can create an extra row on the top and bottom of your table and an extra cloumn on the left and right of your table and use:
<td style="background-image:url(your-left-border-image-here.gif); background-repeat:repat-y; background-position:left;">
on the left column
<td style="background-image:url(your-right-border-image-here.gif); background-repeat:repat-y; background-position:left;">
on the right column
<td style="background-image:url(your-top-border-image-here.gif); background-repeat:repeat-x; background-position:left;">
on the top column, and
<td style="background-image:url(your-bottom-border-image-here.gif); background-repeat:repat-x; background-position:left;">
on the bottom column...
If you have a rounded corner for the background image, you can create a square of the corner image and crop it into the tables....I use this effect when I'm trying to avoid the boxiness of CSS

Open in new window


Thanks a lot for your help..That makes sense now


I forgot to add on the web site effect question, and again on here that the easiest thing to do is - as you mentioned - to slice or create a 1px x whtever image height you need and vice-versa image, save it seperately, and then tile the image along in the table or where ever you need it.

It really speeds up the load time.

BTW, are you in Northern Ireland?



Yes I am Scot I live in County Tyrone

Explore More ContentExplore courses, solutions, and other research materials related to this topic.