HTML/CSS: Creating a div that doesn't trigger a horizontal scrollbar if it's wider than the screen size

Question

I'm trying to improve user compatibility of a site for 800 x 600px monitors.

I have a 'headerbackground' div which is 900px wide, and contains nothing but a background image. The rest of the site is nested inside that div, with a width of 790px.

What I'd like to do is show the full 900px 'headerbackground' div if the browser window is greater than 900px, but not trigger a horizontal scrollbar in the browser if the screen res is between 790 & 900px.

I'm aware that this can be easily achieved with a centered 'background' image on the body tag, but that isn't a feasible option in this case because the current body background image has a horizontally-repeating background, and the header background image doesn't repeat.

Any suggestions appreciated

Edit: Image attached for clarity.

alt text

It's not clear what problem you're encountering. Are you wanting the background image of headerbackground to be centered? — Jacob
– Jacob, Commented Sep 18, 2010 at 18:15
Thanks for the response. I've added an image above which may better explain the problem. I'd like to 'hide' parts of the red box if it's larger than the users' browser window, but trigger a horizontal scrollbar if it's smaller than the green box. — PlankTon
– PlankTon, Commented Sep 18, 2010 at 18:38

Jacob · Accepted Answer · 2010-09-18 18:53:07Z

1

If you use the CSS background-image property for your 'headerbackground div,' and headerbackground is less than the size of the background image, a scroll bar will not be triggered. Rather, the background image will be truncated.

Update:

You should be able to make your headerbackground div non fixed-width so it fills the entire body. Then, you could make its background image centered. Try this for your CSS:

body { background-color: blue; }
#headerbackground { 
    background-color: red; 
    background-image: url(your/url.png);
    background-position: center top;
    margin-left: auto;
    margin-right: auto;
}
#content { 
    background-color: green; 
    width: 790px; 
    margin-left: auto;
    margin-right: auto;
}

edited Sep 18, 2010 at 18:53

answered Sep 18, 2010 at 18:13

Jacob

79k24 gold badges159 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Josh Leitzel Over a year ago

I don't really think this helps; the div is set to a fixed 900px and therefore will always trigger a scrollbar on an 800 width screen.

PlankTon Over a year ago

Thanks for the response. The difficulty is I only want the size of headerbackground div to be less than the background image if the users' screen resolution is less than the width of that background. Specifying a width less than the image will truncate the background-image even for users whose browser window is wide enough to view the full thing. (Edit: Yeah - as Josh says) ;-)

Jacob Over a year ago

@Josh, my answer made sense before the update; basically I was saying the div shouldn't be a fixed 900px.

PlankTon · Accepted Answer · 2010-09-18 18:55:18Z

1

...Aand a couple minutes after I post, I figure it out for myself. Sorry. In case anyone else has the same problem:

Give headerbackground div a width of 100%, and a min-width the same as the internal divs. Center the headerbackground div's background image. Finally, you'll need a min-width hack to make IE 6 happy.

answered Sep 18, 2010 at 18:55

PlankTon

12.6k16 gold badges89 silver badges159 bronze badges

Collectives™ on Stack Overflow

HTML/CSS: Creating a div that doesn't trigger a horizontal scrollbar if it's wider than the screen size

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related