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%;
te         


        

Answer 1

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)