CSS3 Linear Gradient background

Hello there.

I’m trying to put a linear gradient background on the body of this website:
However, it only runs part way down the screen as you can see. I’ve tried various ways of sizing the background but can’t find anything that works.
I obviously want it to cover the viewport, so hopefully one of you out there will make me feel foolish with a simple solution. :blush:
I’d prefer to say, “Why didn’t I think of that”, rather than tear my hair out any more today.:headbang:

Thanks in advance.

Thanks Paul. I’ll re-arrange it.
That’s another comma I’ll never forget again (I hope).


Sorry we missed your post :frowning:

Looks as though the main problem was that you didn’t set the height of html to 100%.
eg. You had this:

html body{height:100%}

and it should be :

html[B],[/B] body{height:100%}

There would still be a missing background if a vertical scroll was induced and the you’d need to set the min-height of the body in pixels to match your centered element.

Well, not a lot of help there then.

For anyone who comes upon the same problem, I solved it by putting a wrapper around the header and putting the background gradient inside it. I didn’t want to use an extra div and I still don’t understand why it should be necessary, but there you go.

I positioned the header inside the wrapper by making it position: relative and using top:4em and margin:auto.

At least now it works.