html - Background image doesn't repeat when browser window is smaller than content?

Question

I have a header-container with a background image, like so:

#header-container
{
background:url(../img/bg.jpg) repeat-x 0 0px;
margin:0px auto;
width:100%;
text-align:center;
}

When my browser is in fullscreen (Firefox, Opera, IE), I get the following result (everything is fine):

When I resize the browser to a smaller window i got this (so far so well):

and when i scroll now to the right the background image doesn't repeat.

Is there a way to fix it so that the image will repeat when I scroll to the right? I know it would work when i move the background image into the body of the CSS, but I have many images for different divs, so I'm not able to do it with the body background image.

Hope somebody can give me a hint :D

Best regards, Bernte

Answer 1

As animuson mentioned in a comment, it's more likely if you have a set min-width or just some content that expands the page over it's available borders.

There is an example of the second one: http://jsfiddle.net/kizu/3hLjv/

To fix the second one, you can make the wrapper to have width set by it's children, for example, you can use inline-block for this: http://jsfiddle.net/kizu/3hLjv/1/, if you have no wrapper, you can set this to BODY: http://jsfiddle.net/kizu/3hLjv/2/

And if you have some blocks with widths or min-widths greater than header's, just add the same min-width to header: http://jsfiddle.net/kizu/3hLjv/3/