Multiple background images ? (CSS)

I'm currently playing around with the Stylish extension for firefox + Bebo.com.
Having a bit of a problem though.
I want to have an large header image at the top of the page. Then I want to display another background image scrolling down the page.
Example page
http://www.bebo.com/Profile.jsp?MemberId=1

Code:

.lyt-multi {background-image:url(http://i1.bebo.com/047a/9/file/20081212/8292201634.jpg);background-repeat:no-repeat;background-position:center top; background-color:black;}
#bd.page-body {background-image: url(http://i1.bebo.com/047a/13/file/20081209/8273737041.jpg); background-position:top center; background-repeat:repeat-x; background-attachment:fixed; background-color:black;}
#top_box {display:none;}
#under_box {display:none;}

.lyt-multi is the centre bit, main profile bit. Where I want the main picture (980x700) centered top, non-repeating, and then an image (say 980x50) repeating itself going down the page.
bd.page-body = the outside of the profile to the left/right for the record.

I can't figure out how to get the 980x50 image to repeat itself , css3 seems to support multiple background images but this is of course no use until it's finalized.

Anyone have an idea of a way to do this in css? Or something else i could apply the 980x50 background to for it to repeat downwards? (some other div maybe)

Thanks