CSS background 100% tiling the browser to narrow the background display is not a complete solution

This article we share the front-end CSS background 100% tile, the browser to reduce the background display is not a full bug resolution two methods, if you also encountered, then you can refer to the following article.

When you zoom out of the browser window, when you drag the scroll bar, you will find that the CSS background you originally set is 100% less than the tile background, and the smaller the window, the greater the space.

Workaround:

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

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

Ps:

Individual thought that the appeal solution was not humane enough,

To achieve flexible coverage at different resolutions, the following processing methods are recommended:

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

2, CSS limit the minimum width, when the browser and continue to shrink, there will be scroll bar, because we have predetermined the minimum width, and this width will not let users see the vacancy, this is a pure CSS solution;

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

Another way

Workaround for a blank bug on the right side of the CSS background when the window is zoomed out

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

Change the size of the browser window, less than the content layer width, as shown in.

Drag the horizontal scroll bar and the bug appears. The background on the right doesn't exist. As shown in.

The root of the problem is that when the window shrinks, the browser default width of 100% is the width of the browser window. While ignoring the lower content layer fixed width (960px). The result is a fixed width greater than 100% width. Browsing with this understanding to parse the page, there is a difference in the container width understanding, there is a very strange bug.

We analyze, the solution of the problem: since it is the difference in width understanding, only need to 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 the head element remains the width of the content layer. This solves the problem on the width.

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

The HTML code is:

<div id= "Wrap" >
<div id= "Header" ></div>
<div id= "page" ></div>
</div>

CSS background 100% tiling the browser to narrow the background display is not a complete solution