Hi!
I've seen this effect on a lot of blogs and I can achieve it with a bg but I wanna know if there is a simpler way with css. It can be seen here: http://shauninman.com
Its the shadow on both sides of the main area. Does anyone know if theres an easy way to do this with css?
Thanks.

Why yes, this is cake.

If you will observe:
www.shut-outshutters.com (a site I created)
You will see a similar shadow on the site. The image is called shadow.gif and you can download it HERE (http://shut-outshutters.com/templates/shut-out_shutters/images/shadow.gif)

Then in CSS this is what you put:


BODY {
HEIGHT: 100%;
BACKGROUND: #E3DFDC;
MARGIN: 0px;
background-image: url( "../images/shadow.gif" );
background-repeat: repeat-y;
background-position: center;
}


This simply places in the Body of your HTML a background that repeats along the yaxis and is centered. You will get your desired effect. Hope this helps!

Thanks a ton. I thought that the height attribute wasn't valide to use anymore? If it's not, than that solves my problem of wanted the height of my tables to be 100% as well.
Thanks again Lordmusic.

According to here:
http://jigsaw.w3.org/css-validator/validator-uri.html

It validates fine. :)

P.S. NP ;)

only thing with that is if you want a textured or repeating background instead of a solid color - you need to get a bit more tricky.

And since most browsers other than firefox and opera can not successfully render transparent pngs..... you'd have to build a large background image....

Example....

www.thecookinggame.com

If you notice - the background image (here: http://www.thecookinggame.com/assets/images/main-background.gif)
is 1600 pixels wide.

Now in your css you just set it to repeat; and it will be 1600 px PLUS the left side again of the texture part before the green content area could be seen again. So needless to say that nobody would really ever see it repeat.

Thanks ryno267. My background was going to have a pattern so I'll use your advice.

here's another I just ran across.

http://static.wordpress.org/2004/g-back.png
http://www.wordpress.org