Depth for website

I don’t even know what to call what I’m trying to do, so here’s a link. I want this effect of having the center panel standing out some from the background. Living Digitally


All they’ve done there is have a background image on the <body> element repeating down the page. If your design s fixed-width, that’s the easiest way to do it. Here’s their code:

body {
  background: url("body.gif") repeat-y scroll center top #505050;
  color: #FFFFFF;

The image is wider than the content, and has the shadow effect on each side.

You can also do this with CSS3, though it doesn’t work in all browsers.

Thanks Ralph, I really appreciate it. I knew that it must be easy, I see it done so much, but for some reason easy is sometimes really confusing to me.

You’re welcome. :slight_smile: Most browsers have dev tools that allow you to peek under the hood and see what’s going on. My preferred tool is Firebug for FF, but other browsers like Chrome have these tools built in. It’s really easy to see that there’s a background image on the body element using these tools.

Got it, and thanks again!