Full page drop shadow

[wakkoguy]

I'm learning CSS and creating a blog at annieagarwal.com/blog (again, work in progress!)

I want to recreate the shadow on the sides of the main container of this blog http://www.robincornett.com/

How do I do that?
The blog has two style sheets
http://www.robincornett.com/wp-content/themes/prophoto2/style.css
http://www.robincornett.com/wp-content/uploads/p2/custom.css?55140

My style sheet is at
http://annieagarwal.com/blog/wp-content/themes/tofurious/style.css

I created a png of the shadow that is 1000px wide at http://annieagarwal.com/blog/wp-content/themes/tofurious/images/shadow.png

But I can't seem to get the code right. I want to use a background image/color along with the container having a drop shadow.

[Cragdo]

The way I do this is to have 2 containers, an inner and an outer container. Make your shadow graphic with a height of 1 pixel and a width of about 10 - 20 pixels depending on the depth of your shadow. You will need 1 graphic for the left side and 1 for the right side.

You can then use css background to paste the graphics to each side:



#innerWrapper {
background: url('image path') top left repeat-y;
}


and


#outerWrapper {
background: url('image path') top right repeat-y;
}


replacing image path with the path to your images.

You will have to mess about with the padding on the outer wrapper depending on the size of your graphic. Hope this helps