CSS background 100% tile browser reduce background display incomplete solution

When you zoom out of the browser window, when you drag the scroll bar you will find that the original set of CSS background 100% tile background less a piece, and the window more hours, the larger the gap.

Workaround:

width:100%;min-width:990px;

In width:100%; Add a min-width:**px to the back; This length is at the lowest width of your Web page.

Ps:

Wind-driven individuals think that the appeal solution is not humane,

To achieve flexible coverage at different resolutions, wind-driven recommends the following processing methods:

1, combined with JS, when the window changes when the implementation of the event width fixed value adjustment;

2, CSS limit the minimum width, when the browser and continue to shrink, will appear scrollbars, because we have booked the smallest width, and this width does not allow users to see the vacancy, this is a pure CSS solution;

If you have a new solution, welcome to discuss the exchange with the wind; \ (^o^)/~

Another way

A solution to the right blank bug when the CSS background image appears when you shrink the window

The page container (#wrap) and the page header (#header) are 100% widths. The contents of the container (#page) is fixed width 960px. The width understanding difference occurs when the Browse window shrinks and is less than the width of the content layer. The window is wider than the width of the content layer as shown in the following illustration:

Changing the size of the browser window is less than the width of the content layer, as shown in the following figure.

Drag the horizontal scroll bar to appear as a bug. The background on the right does not exist. As shown in the following figure.

The problem is that when the window shrinks, the browser defaults to the width of the browser window by 100%. The lower content layer fixed width (960px) is ignored. Thus, a fixed width greater than 100% width appears. Browse to this understanding to parse the page, there is a container width understanding of the differences, there is a very strange bug. As shown in the figure.

We analyze the solution to the problem: since it is the difference in width understanding, just tell the browser page container width, the width of the head element can not be less than the width of the content layer. When the browser window shrinks, the minimum width of the page container and head element is the width of the content layer. This solves the problem of the width.

CSS code is:

#wrap {
    width:100%;
    background: #ddd;
    width:expression (document.body.clientWidth <= 960?) "960px": "Auto");
    min-width:960px;
}
#header {
    width:100%;
    height:78px;
    border-bottom:1px solid #f60;
    background: #f0f0f0 URL (head_tbg.jpg) repeat-x;
}
#page {
    width:960px;
    height:100px;
    margin:5px Auto;
    background: #fff;
    border:1px solid #00CCCC;
}

HTML code is:

<div id= "wrap"
    <div id= "header" ></DIV>
    <div id= "page" ></DIV>
</div>