Web Hosting Blog

Create a drop shadow effect for your website using CSS

17/08/2008

Posted in: Web Design

This tutorial will teach you how to create a drop shadow background effect for your website, using only a single image and some CSS. Not only is a drop shadow effect simple to create (only a few lines of code) but it also adds a new dimension to your site and can really make your content stand out. This post will run through the basics of how the code works and what is needed to create the effect. A fully detailed explanation, including all the code and graphics, can be downloaded at the bottom of this post.

Drop shadow effect example:

http://www.heartinternet.co.uk/blog/HI_Drop_Shadow.zip

The shadow effect is achieved by repeating the image of the drop shadow vertically (see attached files, below) by applying the style to your using CSS. Two drop shadow images have been created, allowing you to use a larger width if necessary. Included sizes are optimised for 800x600 and 1024x768 monitor resolutions. Depending on which size you wish to use, simply change the width property of the #container style.

 

Now that the background effect is applied to the website, add a #container div to your html and give it the property margin: 0 auto; this means it will always sit perfectly in the middle of your page. If you’re using the smaller shadow image make sure the width of the #container is 760px or if you’re using the wider image the width should be 960px.

HTML Code:

Your Content Here

CSS Code:

body {

     background-image: url(images/background_760.jpg);

     background-repeat: repeat-y;

     background-position: center;

     background-color: #f7f4ee;

} #container {

     width: 760px; margin: 0 auto; text-align: center;

}

Download the full tutorial here:

http://www.heartinternet.co.uk/blog/HI_Drop_Shadow.zip

Was this article useful? Let others know

(1/10 based on 1 review)

Comments

Please remember that all comments are moderated and any links you paste in your comment will remain as plain text. If your comment looks like spam it will be deleted. We're looking forward to answering your questions and hearing your comments and opinions!

{author}

 

  • jenn
      12 December 2008 at 4:42

    how do you set the height of the background?

    jenn  
  • Ben
      09 January 2009 at 14:45

    Hi,

    Not a problem, you will need to apply the background image to the #container rather the the body.

    Here is the code:

    body {

    background-color: #f7f4ee;

    margin: 0; padding: 0;

    }

    #container {

    width: 778px;

    margin: 0 auto;

    background: #fff url(images/background_760.jpg) repeat-y fixed center;

    height: 500px;

    }

    Adjust the height within the #container accordingly

    Ben  
  • car jacks
      14 March 2009 at 12:54

    It’s the first time I commented here and I should say that you provide us genuine, and quality information for bloggers! Good job.

    p.s. You have a very good template for your blog. Where did you find it?

    car jacks  
  • Matthew
      16 March 2009 at 11:31

    We used ‘WordPress Default 1.6 by Michael Heilemann’ but made a lot of changes to fit it in with our own website.

    Matt

    Matthew  

  {author}

 

  Live chat