50% background + gradient

I want to add a gradient background to my web page (the area marked with yellow border is where the actual content is displayed) and I want it to take just 1/2 of the page (the bottom part): alt text http://img14.imageshack.us/img14/8453/50gradientbackground.png

I believe this is possible with CSS, but so far I have only managed to get a gradient background (taking the whole heig开发者_开发技巧ht of the page).

Thank you very much in advance!

You can do it with something like this:

#background {
background: url('GRADIENT-IMAGE-URL') 50% center THE-KIND-OF-REPEAT;
height: THE-HEIGHT;
width: THE-WIDTH;
}

50% here means that the background image will be positioned 50% from the top.

This is the solution that I have managed to work out eventually:

background: url('IMAGE-URL') bottom repeat-x;