Body Background image overflowing--causing unwanted scrolling.

[JosephBergdoll]

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?

[monicasaha]

u can try min-height attribute to solve ..

[JosephBergdoll]

u can try min-height attribute to solve ..

Nope, no dice.

[Snookerman]

Try removing this:

<div id="content2"></div>

Good luck!

[jscheuer1]

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.

[auntnini]

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.

[jscheuer1]

BULLETPROOF WEB DESIGN

No such thing.

[JosephBergdoll]

Try removing this:

<div id="content2"></div>

Good luck!

No thanks, I need that for content.

[Snookerman]

Well that's what is causing your scroll, the empty div has a height:

#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.

[jscheuer1]

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.