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

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

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

}

Answer 2

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;
}

Answer 3

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)

Answer 4

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.

Answer 5

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.

Answer 6

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/