How to implement multi piece page background that is behind a content background in HTML/CSS without Javascript?
===

I'm having trouble implementing this design I was given into HTML/CSS. Here is the .psd: http://www.sendspace.com/file/10wuld

Here is the code so far: http://jsfiddle.net/wezW4/

Here are some visual notes:  http://screencast.com/t/FMq6JK5weI

I got stuck now where I used position:relative for #content-background, it leaves a big empty space after I position it.  A friend suggested approaching it differently with absolute positioning on the page background elements, but didn't make as much progress.

How can this be done with my current approach?  Or if my approach is wrong, what is the correct approach? 