I see you're using tables for layout - I'm not sure of an easy way to do this with tables.
What I do is for a 100% high background image (top to bottom of the site)
Mock up the white bit of the central page in Photoshop - make it about 760px wide. Add a dropshadow round it. Crop the image so that it's about 3 pixels high and extends to just outside the fade of the dropshadow. Then I add it to the body element of the CSS:
body {text-align:center; background: white url(images/background.jpg) top center repeat-y;} (plus whatever other rules you need in there)
#container {margin:0 auto; text-align:left;width:760px;}
That will put the background image centrally down the middle of the page top to bottom and centralise a containing div I've called "container" on top of it.
If you want the dropshadow just in a box with a gap top and bottom then you mock it up the same way in Photoshop but make sure that the central white area AND the dropshadow are within the 760px limit so that the site won't cause scrollbars at 800px resolution. Save it the same way to about 3 pixels high.
Then add it to the container element:
body {text-align:center;}
#container {text-align:left; width:760px; margin: 2em auto; background:white url(images/background.jpg) top center repeat-y;}
This centres the box in the middle of the page - 2ems from the top of the page (obviously change that as needed) with the background just around the central containing box. You can then add the "top" fade and the "bottom" fade as background images of other elements to complete the box.
As you're using tables I suppose you could just stick a containing div around your current table.
Edit: See attached gif file for your background image.
