Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Creating a background image that will display a shadow behind my page



7:01 pm on Feb 26, 2008 (gmt 0)

5+ Year Member

I'm using Fireworks and Dreamweaver MX. I need to create a shadow effect around my web pages. I plan to have a colored background and need my white pages to stand out.

Anyone in the know with this?


12:36 pm on Feb 28, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

You can do this a number of ways - the best might be to to use a series of background images positioned with CSS that provide the shadow over the background colour of the page.

The html might look like:

<div id="header"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>


body {background:#[i](your color here)[/i] }
#header {background:url(images/top-shadow.gif) no-repeat;}
#leftcolum {background:url(images/left-shadow.gif) repeat-y;}
#rightcolumn {background:url(images/right-shadow.gif) repeat-y;}
#footer {background:url(images/bottom-shadow.gif) no-repeat;}


5:28 pm on Feb 28, 2008 (gmt 0)

5+ Year Member

Do your instructions set a background to individual cells of my table or to the page properties of the page? It may seem simple but this task is giving me a headache... :)


1:46 am on Mar 2, 2008 (gmt 0)

10+ Year Member

Actually, this is pretty easy to achieve without the pain of css-based methods, which are still pretty kludgey. The easiest way .. create a horizontal 'slice' of your page graphic which includes the shadow on the sides. It can be quite narrow vertically, then using CSS, set that shadowed graphic as a repeating background on a div, set to repeat vertically only. I use this method all the time. Pop on a header and footer if you like, again as backgrounds with the shadows, and your effect is done.


3:31 pm on Mar 4, 2008 (gmt 0)

5+ Year Member

Thanks guys!

Featured Threads

Hot Threads This Week

Hot Threads This Month