Help with CSS Background image not expanding all the way when page needs to scroll
So I have a background gradient that I want to start from the very bottom of the page and go up a fixed amount (in this case 502 px). Essentially I want it to stick to the very bottom of the page, which it mostly does, but it sticks to the bottom of the window rather than the bottom of the page. I've accomplished this by having a container div use
And then inside I've nested the gradient div:
Now up to a point this works all well and good. The gradient sticks to the bottom of the visible area, and if I resize the window up and down, it moves along like it should (until the window size is < 800px high, which is also something that needs to happen).
The problem arises when the actual content of the page expands vertically past the window size (in other words, until the page needs a scrollbar). I guess that the "height:100%" line refers to the window size, not to the actual page content size, because the gradient still sticks to the bottom of the visible window, not the page as a whole. Then, when you scroll to see the rest of the content, the background just drops out and it leaves a fairly ugly effect. Obviously this is not the intended effect and is causing me great distress.
Can anyone help?