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
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.
It’s hard to ho give you an answer w/o seeing ALL your code, both CSS and HTML as they go hand in hand. For now I will offer the following pointers:
height:100%" line refers to the window size, not to the actual page content size
Actually it refers to the parent ( and only if the parent has a declared height ( and thus what you are noticing). Ultimately the parent of all elements is the window ( html/body tags). So when you set html/body to height:100% ; you are setting that element to the size of the browser view port.
BTW, you don’t have to give DIVs display:block; that’s redundant as they are already block level elements.
Again w/o seeing your whole page, I am but guessing as the TOTAL effect needed, is there a reason you have put the bg in a SEPARATE and ABSOLUTELY POSITIONED div element?
Actually it refers to the parent ( and only if the parent has a declared height ( and thus what you are noticing). Ultimately the parent of all elements is the window ( html/body tags). So when you set html/body to height:100% ; you are setting that element to the size of the browser view port.
So I guess my question is, when the content of a page overflows the browser view port, is there any way to access that part with CSS? Like, what is the parent for that part of the page, and how do you tell an element to start at the very very bottom, not just the bottom of the browser view port? Can that be done?
Yes of course. Well in terms of what you mean, if you set the wrapper element to min-height:100%; it will have 100%height, though if need be it will expand beyond that. Footers can be placed under that.
I may have explained it badly…what exactly are you trying to have start at the very bottom of the page? A sticky footer?
I think you are misunderstanding the whole concept of a web page. Objects aren’t the children of what they LOOK or APPEAR like on the screen; they are children of other mark-up objects, regardless of their appearance. So, you cant target, without the help of .js, something by the way “it looks” or where it “looks” to be rendered.
I am confused still about what you are trying to accomplish, tho. te code I provided should put your gradient at the bottom of your page, regardless of window size, show the entire gradient at all times ( except of course when the window is smaller than the size of the gradient, that’s just simply not PHYSICALLY possible) and stretch to fit the content size.
IF ON THE OTHER HAND what you wanted was the gradient NEVER to go away fromt he bottom of the window, even when you scroll AND regardless of the amount of content. … you could use background-position: fixed;
Haha, I fear I’m actually the one doing a bad job of explaining things. I have a background image/gradient that I want to start at the very bottom of the page, not just at the bottom of the viewing window. It’s kind of a pain but it’s what the design calls for.
I’ve experimented around with the “min-height: 100%” and the “height:100%” attributes, but they only seem to affect the viewing window. So the image/gradient starts at the very bottom of the viewing window, not the total page (ie, if you scroll down, the image stops and there’s just “white space”.
Ok I think I’m beginning to understand what you’re saying. I think I’ve been approaching the problem in completely the wrong way, and I’m gonna try to implement the code that you gave me. Thanks a ton for your help!
I have a background image/gradient that I want to start at the very bottom of the page, not just at the bottom of the viewing window. It’s kind of a pain but it’s what the design calls for.
What you need here is bg attachment: background: url(‘images/background/backgradient.png’)repeat-x center bottom blue ;
A container, UNLESS GIVEN EXPLICIT DIMENSIONS will expand to the size of its contents by default, if you have a DIV that wraps around the whole page and attach the bg image bottom… then it will be at the bottom of the whole page. If you don’t want the image to be covered up by the content, then give that container element PADDING-BOTTOM equal to or greater than the image height.