Welcome to WebmasterWorld Guest from 54.147.10.12

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)

New User

5+ Year Member

joined:Feb 19, 2008
posts: 7
votes: 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?

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 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;}
5:28 pm on Feb 28, 2008 (gmt 0)

New User

5+ Year Member

joined:Feb 19, 2008
posts:7
votes: 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... :)
1:46 am on Mar 2, 2008 (gmt 0)

New User

10+ Year Member

joined:Mar 19, 2004
posts:10
votes: 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.
3:31 pm on Mar 4, 2008 (gmt 0)

New User

5+ Year Member

joined:Feb 19, 2008
posts:7
votes: 0


Thanks guys!