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

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

#header-con开发者_StackOverflow中文版tainer
{
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

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/

The reason it doesn't work is that in CSS, block boxes don't expand to surround their contents. Your #header-container has its ordinary width (no wider than the window), and does not extend extra to the right.

Try applying #header-container { display: table; }. Using the table layout model causes the box to be enlarged to fit the content, but if it does not need to be enlarged then it will still respect your width.

I am not allowed to comment, so I will add another answer here, maybe it helps someone.

Kevin Reid's solution worked for me, but only in conjuction with setting the width to 100%, so this is what I ended up with:

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

Try using an :after pseudo element with your image in it.

#header-container:after {
    content: "";
    background:url(../img/bg.jpg) repeat-x 0 0px;
    width: 9999px;
    position: absolute;
}

Or something like that.

In your case you might just be able to drop the width and margin styles in that class:

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

The width:100% makes it so that the div takes on the width of the viewport which is not the same as the width of the document if you can scroll right or left.

If that is not the case we (all) will need your main layout html and css to come up with a proper solution.

Don't want to critisize the other answers but at this point they're probably all over complicated for what you actually want to achieve... (more description is welcome)

Add to "body" tag "width: 100%; display: table;"

body
{
    //..your_body_css_here...
    width: 100%;
    display: table;

}