HTML & CSS
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.
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
Looks as though the main problem was that you didn't set the height of html to 100%.
eg. You had this:
and it should be :
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.