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
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 width
s or min-width
s greater than header's, just add the same min-width
to header: http://jsfiddle.net/kizu/3hLjv/3/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With