homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

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

 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?



 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:

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

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)

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)

Thanks guys!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved