I’m trying to put a linear gradient background on the body of this website: http://www.ijacobs.com/trial/html/index.html
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:
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.
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.
