How to have a background image wider than the content area of a website (without scrollbars)

Question

I've been given a design for a website, and am trying to implement it.

One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.

Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.

This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).

The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).

This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.

A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).

Any ideas on how to fix this so that backgrounds images

1. don't create scrollbars since they are not part of the content of the site
2. are fixed relative to the content of the site (and don't shift around at small browser window sizes)

?

An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.

I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.

Thanks! (this is a complex issue, so if any clarification is needed, let me know)

UPDATE: Fixed this by setting min-width on the background div to the width of the content.

Answer 1

Am I missing something, or should you be using the CSS background-image property?

I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.

See what I mean?

Answer 2

You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.

Answer 3

You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.

Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.

Like so.

HTML

<div id="header">
    <div class="wrapper">
     ...
    </div>
</div>
<div id="content">
    <div class="wrapper">
     ...
    </div>
</div>
<div id="footer">
    <div class="wrapper">
     ...
    </div>
</div>

CSS

div#header {
    background: url(...) 50% 0; /* to center your background image horizontally */
    }

div#content {
    background: url(...) 50% 0; /* to center your background image horizontally */
    }

div#footer {
    background: url(...) 50% 0; /* to center your background image horizontally */
    }

div.wrapper {
    maergin: 0 auto; /* to center the div horizontally */
    width: 960px; /* or however wide it should be */
    }

Hope this helps.

Answer 4

Set the min-width on the div containing the background image to the width of the content.