How do I wrap drop shadow around webpage

HTML & CSS
21

Hi guys,
Here is the link and code. You’re all a big help.

22

I can’t see the problem because my viewport is too small, but the problem is that you’ve got the background image on the <body> tag. That means that it will go all the way to the bottom of the screen independently of how much content there is.

The ideal is to have a centered wrapper div that contains all the content, and then have the background image on that.

However, with a table layout that’s not as easy. I guess you could wrap all of the site content in a wrapping table and have the background image on that.

23

Ralph so it’s not possible with a table? Ugghhh this is a bummer!

24

No, you should be able to do this no problem.

Try wrapping the content in a div that is slightly wider, so that the shadow will appear to hang over the edges, and repeat that background on the wrapping div.

In fact, I would replace the <center> element with a wrapper div:

<div id="wrapper">
    all your code here
</div>

CSS

#wrapper {
  padding: 0 12px; /* leaves room for the shadows */
  width: 994px;
  margin: 0 auto; /* centers the wrapper */
  background: #2e81d4 url(/images/backgroundcolor.jpg) repeat-y 50&#37; 0;
}

Make sure to take the background image off the <body> element.

See if that helps!