SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How To Make The Background Image Fill The Entire Viewport

    LINK-
    http://www.tds-exhibits.com/test/

    The background image stops at the end of the DIV that has content and I am wanting it to continue to extend the entire viewport EVEN when there is a short page with not alot of content. Can someone tell me where I went wrong and how to fix it?

    Todd Temple
    Todd Temple > T2 Design

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,139
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    Are you talking about
    Code CSS:
    #outer {
     width: 1000px;
     margin: 0 auto;
     background: url(../i/gfx_bkg_wrapper.png) repeat-y 0 0;
     height: 100%;
     overflow: visible;
     }

    Maybe it should be "left top" instead of "0 0"?

    Or another bug? http://reference.sitepoint.com/css/background

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Mittineague View Post
    Are you talking about
    Code CSS:
    #outer {
     width: 1000px;
     margin: 0 auto;
     background: url(../i/gfx_bkg_wrapper.png) repeat-y 0 0;
     height: 100%;
     overflow: visible;
     }
    Yes, on the home page it stops before extending to the entire viewport. But on other pages that have more content it extends all the way to the bottom.
    Todd Temple > T2 Design

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,139
    Mentioned
    190 Post(s)
    Tagged
    2 Thread(s)
    I think it has something to do with the way browsers determine 100%, eg. if the page is 20px high, then 20px is 100%

    I see
    HTML Code:
    <body>
    <div id="outer">
    I'm not a CSS guru so I'm mainly guessing, but maybe if you gave the background image to the body instead of the div?

    EDIT: I see what you mean about the other pages. But I don't see anything that would explain why the div goes all the way to the bottom in those.

  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)
    1) "left top" and "0 0" or not declaring any position at all all mean the same thing. I you really want a bg to begin repeating at the top left, you shouldn't have to declare anything UNLESS you have another rule that has previously cascaded down to your target element and you are trying to rest that. But really it would be wiser, even if more work, to fix the cascading specificity problem. Anyway: you probably don't need the "left top" or "0 0" ;

    2) The background will only apply to the element to which is assigned. The problem is not so much that the bg is stopping, is that the DIV is stopping, follow? I didnt have time to examine ALL YOUR code,, but PLAY AROUND with this:

    html , body, * html #outer {height:100&#37;}
    #outer{min-height:100%}
    * html #outer {height:100%;}


    or if you are going to apply Mitt's suggestion, change the background position to "center top". This will only work, as long as your #outer div is centered to the viewport ( using margin:0 auto}

    hope that helps.

  6. #6
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    or if you are going to apply Mitt's suggestion, change the background position to "center top". This will only work, as long as your #outer div is centered to the viewport ( using margin:0 auto}

    hope that helps.
    I added the background to the body tag and it looks screwed up. Can someone else help solve this problem?

    LINK-
    http://www.tds-exhibits.com/test/index.091310.html
    Todd Temple > T2 Design

  7. #7
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan Reese figured this one out. It requires setting the min-height to 100% on my div outer. Thank u Ryan!
    Todd Temple > T2 Design

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,338
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Todd Temple View Post
    Ryan Reese figured this one out. It requires setting the min-height to 100% on my div outer. Thank u Ryan!
    Glad you sorted it and sorry I missed your post.

    This is actually covered in the FAQ though


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
  •