Header Background Image Disappears Upon Browser Zooming

Question

Zooming out on Google Chrome browser makes the header's background image seemingly disappear. The image has a width of 1px, but it repeats horizontally.

HTML

<html>
    <body>
    <div id="wrapper">
        <header id="header">
            <div id="Nav-Bar"></div>
        </header>
</html>

CSS

#header {
    width: 100%;
    height: 220px;
    background: url("img/headerpattern.png") repeat-x;
    background-size: 1px 165px;
}

I would like for the layout of the page to remain intact whether someone zooms in/out. What causes this behavior?

make a jsFiddle to demonstrate the issue. Hard to diagnose without even seeing the background image. — crowhill
I attempted to create a jsFiddle before this post, however duplicating the problem didn't seem to work (I did do it rather quickly). The background image itself isn't the issue, it can really be any 1px wide, horizontally repeated image, it will always behave the same. — Sanphorii

Philipp Sch Philipp Sch · Accepted Answer · 2015-09-17T08:08:12

If you zoom out of the window, the image with a width of 1px will get smaller and approximate to zero. A width of zero will not be shown.

I tested a image and if you use a image width of 4px the zoom out in Google Chrome works to 25% (Max. zoom out).

Header Background Image Disappears Upon Browser Zooming

1 Answers