CODEWITHSUNDEEP
css
Fuego DeBassi
Fuego DeBassi

Reputation: 3017

100% width bg images not extending on horizontal scroll

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 and the viewport goes under that constraint, a horizontal scroll bar appears. Pretty much what you would expect, but when you scroll over horizontally all elements that are suppose to extend across the entire width of the page and have background images/colors different from the body do not extend. If you resize the viewport it seems to catch up.

Is this a known issue? You can see it on a lot of sites, http://gowalla.com for example.

Any ideas?

Upvotes: 14

Views: 12096

Answers (4)

Thomas
Thomas

Reputation: 1

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

Upvotes: 0

webjsubash
webjsubash

Reputation: 31

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 !

Upvotes: 3

jackocnr
jackocnr

Reputation: 17416

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/

Upvotes: 16

David
David

Reputation: 682

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.

Upvotes: 0

Related Questions