50% background + gradient

Question

Hello,

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):

I believe this is possible with CSS, but so far I have only managed to get a gradient background (taking the whole height of the page).

Thank you very much in advance!

Answer 1

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.

Answer 2

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

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