Background problem

I'm currently designing this site http://www.hannabyandjones.co.uk/demo/index.php

and have a problem when it comes to background images. I need the white section with the black borders to reach to the bottom of the page no matter what (it doesn't work when making the text smaller in ff), so normally I'd put it in the body as a repeat y background image.

But the problem is I need the gradient background, and I can't have that in a div or it goes over the top of the body background.

So at present the gradient is the body bg, and the container bg in a div. Can anyone please help me get the desired effect?

Thanks

It goes to the bottom of the page for me.

A number of pointers:
The information about the use of access keys on your accessibility page is incorrect for your site. Also IE is the only browser that uses the 'Alt' key so you should make this text more generic.

When the cursor hovers over your header graphic, in IE the graphic menu will show which is annoying. You can fix this with a meta tag.

Your triple A method for adjusting the font size only works in IE.

Better to use relative font sizes in your css rather than the fixed ones and let the end user set their own font sizes.

The background doesn't reach to the bottom of the page if you decrease the font size so it's really small in ff, that's the problem I have.

The AAA should work in other browsers, works fine for me in ff

I'm doing this work for someone else so have to keep in certain things like the aaa and accessibility page. Otherwise I'd use ems, but it's not what's been asked of me this time.