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

Question

Hi folks,

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.

Answer 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;
}

Answer 2

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