Hey all,

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

Code:
display:block;
min-height: 800px;
position:relative;
height:100%;
And then inside I've nested the gradient div:

Code:
position: absolute;
padding:0;
bottom:0;
width: 99%;
height: 502px;
background-image: url('images/background/backgradient.png');
background-repeat: repeat-x;
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.

What I want is for the gradient to be fixed to the lowest-most point of content on the page, not the bottom of the window itself. I've thought of ways to do this with javascript, but I'd like to avoid that if possible because of the problem that would arise when viewing the page without javascript.

Can anyone help?

Thanks,
-James