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/article.aspx?p=420897&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.

[JosephBergdoll]

No, I want the page to scroll, I just don't want it to recognize the rest of my background (bottom portion that's just blank wood grain) which causes it to scroll way past where any content would be.

[Snookerman]

Well if you don't specify any background for the content2 div, it will inherit the body background. I suggest you move the background image from the body and put it in the elements you want it for. You could also make content2 stretch 100% and give it a different background. A third option would be to make the background image the exact height of the body so it ends where you want it (not very flexible) and then have it repeat on the x axis only.

Good luck!

[Snookerman]

Emm.. I just looked at the background image you are using:
http://www.josephbergdoll.com/images/background.jpg (http://www.josephbergdoll.com/images/background.jpg)

Emm.. that is exactly what you will get, whether or not you repeat it, since the image so huge it will go all the way down. Don't really understand why you have that image, it doesn't even fit at the footer. It looks to me that it's just a repeating pattern, you could just have a small piece of it instead.

[jscheuer1]

Background images NEVER cause scroll. It is the height of the elements, divisions in this case.

[Snookerman]

If you want to see why you get the scrollbar insert this in your css code:

#content2 {
background-color:#0099ff;
height:725px;
width:600px;
}

[JosephBergdoll]

Ok, you were right about my content2 div. My bad. Turns out it just needed to be sized down a bit on the width. Thank you!

[Snookerman]

You're welcome, glad to help! You can go to your first post in this thread, click http://www.dynamicdrive.com/forums/images/buttons/edit.gif then click Go Advanced and add the Resolved prefix to the thread title. This will let other users know the problem has been solved.

Good luck with your site!