Header Image stops repeating when window is resized

Question

So i have an image in stuck to the top of my page that repeats all the way across the top. For some reason when I resize the window and then scroll over to the right it stops repeating. The div is the first in the document outside of the wrapper. Any ideas?

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;

}

Answer 1

This seems to work fine in FireFox. Check the width of the parent element when you resize the window.

Answer 2

The available benchmarks as set by your code are:-

• width - 100% (so full width of the image is taken into consideration)
• "background repeat - x" - Image will repeat horizontally

Internally, say the width of the image be 250px & the width of your full browser screen be 1024px. So technically, the image will repeat horizontally at least 5 times, with 4 times in full size & the last one will be shown a little bit.

Now, if you resize the browser or view the same web page in a pop-up window, your browser screen is bound to have its width modified. Let's say that now your browser screen width is 220px. As the image width is greater than the browser screen width (in this particular test case), so the image will not repeat at all, & you will also not be able to see the full image.

It's not that there is any bug, it's just the logical part, which we need to understand.

Hope it helps.