Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: Body Background image overflowing--causing unwanted scrolling.

  1. #1
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Body Background image overflowing--causing unwanted scrolling.

    First off, the page in question is:
    http://www.JosephBergdoll.com/index2.php
    with the CSS located at:
    http://www.JosephBergdoll.com/style.css

    My background image is oversized (1000x2000) so that a user running a larger screen will not see blank space below where the background would normally stop. However, this is causing the browser to want to be able to scroll the entire length of the background image. I do not want this. I want the browser to be able to scroll the minimum distance, seeing as how my container is 1000x1000. How can I stop the body background from continuing to overflow and giving me scroll headaches?
    Last edited by Snookerman; 04-22-2009 at 08:29 AM. Reason: added “Resolved” prefix

  2. #2
    Join Date
    Oct 2008
    Location
    kolkata, india
    Posts
    75
    Thanks
    2
    Thanked 10 Times in 10 Posts

    Default

    u can try min-height attribute to solve ..

  3. #3
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by monicasaha View Post
    u can try min-height attribute to solve ..
    Nope, no dice.

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Try removing this:
    Code:
    <div id="content2"></div>
    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    A background-image will never do that. You've done something else to cause it. If you set no height on your divisions, they will expand in that dimension only as needed to accommodate their contents.

    Snookerman's idea is good too, except if you intend to use that division in the future for additional content.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    245
    Thanks
    39
    Thanked 24 Times in 24 Posts

    Default

    BULLETPROOF WEB DESIGN by Dan Cederholm might be helpful. I could not get online sample of portion dealing with vertical expansion of background images, but here is a sample from http://www.peachpit.com/articles/art...20897&seqNum=6 on Expandable Rows so you can taste Dan Cederholm's approach:

    Sample provided courtesy of Peachpit Press
    from the book Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS

    Summary ...

    Here are some points to remember when you're building horizontal design components:

    Taking nonessential graphics out of the markup and using background images within the CSS can help control code bloat.
    Use the "opposing floats" method for positioning content on opposite sides of a container.
    When the amount of content to be placed inside a design component is unknown, use two background images to let that component expand and contract.
    Plan for more space than you think you need.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by auntnini View Post
    BULLETPROOF WEB DESIGN
    No such thing.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jan 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Snookerman View Post
    Try removing this:
    Code:
    <div id="content2"></div>
    Good luck!
    No thanks, I need that for content.

  9. #9
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Well that's what is causing your scroll, the empty div has a height:
    Code:
    #content2 { //style.css (line 75)
    height:725px;
    width:600px;
    }
    If you will put content in there then you will need the scroll. I'm not really sure I understand what you want anymore. Please explain again if I misunderstood you.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Snookerman's right. It is the height of the divisions, not the background image that is causing the scroll.

    As I suggested, remove and/or drastically reduce the height declaration of all content divisions and you will be fine. If you want to be sure of having at least a little empty space, use padding or margin for these divisions.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •