SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS Background image not expanding all the way when page needs to scroll

    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

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Welcome to Sitepoint, James.

    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?

    You could try something like this instead:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    			html, body{height: 100%; padding:0; margin:0;}
    			#page{ min-height:100%; background: url('images/background/backgradient.png')repeat-x center bottom blue; margin:0 15%}
    			#content{min-height: 502px;}
    		</style>
    	</head>
    	<body>
    		<div id="page"><div id="content">
    			text<br>
    			text<br>
    			text<br>
    			text<br>
     		</div></div>
    	</body>
    </html>

    Hope that helps. Post your code or a link and either another forum member or myself can provide further assistance.

  3. #3
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey thank you very much for your response

    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?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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;

    like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    			html, body{ padding:0; margin:0; height: 100%;}
    			#page{ min-height: 100%; background: url('images/background/backgradient.png')repeat-x center bottom blue fixed; margin:0 15%}
    		</style>
    	</head>
    	<body>
    		<div id="page"> 
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
    			text<br>
     		 </div>
    	</body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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".

    Thanks very much for the help!

  7. #7
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @dresden,

    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!

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,796
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just to let you know, your advice got it to work. Thanks ever so much, that was really frustrating me!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •