100% width bg images not extending on horizontal scroll

Question

I\'m noticing this issue. I made a quick screen capture to demonstrate: http://dl.dropbox.com/u/904456/2010-06-14_2323.swf

Basically when you have a min-width set an

Answer 1

I managed to solve this issue on gowalla and stackoverflow (it happens to the footer) by adding a min-width to the body element. I think that on your own site though, it would be better to apply it to a wrapper div that encompasses ALL of the page's content (including the footer).

You will need to set it's value to the minimum fixed width of the content, so if your main content div is set to be 960px wide, then that's probably what you want (but you may need to tweak to account for extra margins/borders etc).

Here's an example: http://jsfiddle.net/qUyp2/

Answer 2

Without seeing any of the associated code I can only assume on what would need to be done.

I normally do scalable designs and here is how I would approach your problem:

Here is how I would generally setup a page with background colors such as what was shown in the video.

HTML:

<div id="content-wrapper">
  <div id="content">
  </div>
</div>

<div id="footer-wrapper">
  <div id="footer">
  </div>
</div>

</div>
</body>

CSS:

body { width: 100% }
#main-wrapper { width: 100%; background-color: #000 }
#header-wrapper { width: 100%; background-color: #111 }
#header { width: 200px; margin: 0 auto }
#content-wrapper { width: 100%; background-color: #222 }
#content { width: 200px; margin: 0 auto }
#footer-wrapper { width: 100%; background-color: #333 }
#footer { width: 200px; margin: 0 auto }

The same concept can be applied for background images, though to maintain the appropriate effect (unless it is a pattern that can be repeated) you would need to have a very wide image or atleast one that fades to some background color. What you would do is place the image as the background image and then simply position it as center top and it will expand with the page.

Hope this helps.

Answer 3

Change your width of the content to 2000px than scroll and see what happens: NO background anymore in the scrolled area

Answer 4

I think you are talking about a problem where 100% width is equal to the width of viewport not the content to make the background go to the width of content you should add min-width to the background div such as:

.background
{
    width:100%;
    min-width:960px; /* The width of the content */
    background:url(your-pretty-background.png);
}

.content
{
    width:960px;
}

It works !