Results 1 to 9 of 9
Apr 10, 2012, 17:29 #1
- Join Date
- Mar 2007
- 0 Post(s)
- 0 Thread(s)
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
display:block; min-height: 800px; position:relative; height:100%;
position: absolute; padding:0; bottom:0; width: 99%; height: 502px; background-image: url('images/background/backgradient.png'); background-repeat: repeat-x;
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?