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

Forum Moderators: not2easy

Message Too Old, No Replies

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

RigelBlueStar

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

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?

limbo

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

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:


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

CSS:


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;}

RigelBlueStar

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

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... :)

LadynRed

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

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.

RigelBlueStar

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

Thanks guys!