CSS implementation of Web page background image Adaptive full-screen explanation

This article and we introduce the CSS to achieve a Web page background image Adaptive full-screen method of the relevant information, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

Web page background self-adapting fullscreen. Png

A clear and beautiful background picture can give a lot of pages, designers also often give the page background use large map, we do not want to picture because of different resolution picture deformation, also do not want to be in the case of large screen, the background has a piece of grin, in short, is to achieve self-adaptive screen size without deformation of the background large map, And the background picture does not scroll with the scroll bar scrolling.

The following are the methods implemented with CSS:

Html:

<! DOCTYPE html>
Css:



#web_bg {  position:fixed;  top:0;  left:0;  width:100%;  height:100%;  min-width:1000px;  z-index:-10;  zoom:1;  Background-color: #fff;  Background-repeat:no-repeat;  Background-size:cover;  -webkit-background-size:cover;  -o-background-size:cover;  Background-position:center 0;}
Here, let's analyze what each code in the CSS does:



  position:fixed;  top:0;  left:0;
The three sentences are fixed to the top and left of the screen.



width:100%;height:100%;min-width:1000px;
The first two sentences are to make the whole p and the screen to achieve the same size, so as to achieve full-screen effect, and min-width is to achieve the screen width within 1000px, the size of P remains the same, that is, in this case, when the width of the screen is scaled, Do not scale the image (only valid within 1000px).



z-index:-10;
The purpose of this is to get the entire p below each level in the HTML page, under normal circumstances, the first created level of the Z-index value is 0, so if we write here-1 can also be implemented, but here is 10 is to ensure that the entire p at the bottom, because if there are too many levels in the page, Sometimes using-1 is not necessarily at the bottom, but it does not make sense to write-100 such a large number. Using INDEX:-10 to achieve a look like a background image, in fact, is a most common p, but the hierarchical relationship has changed, so that people look at the background image.



Background-repeat:no-repeat;
The above is the background, don't repeat.



Background-size:cover;-webkit-background-size:cover;-o-background-size:cover;
The above three sentences are meant to allow the picture to be scaled synchronously with the screen size, but some may be cropped, but not grin, and the following two are compatible with chrome and opera browsers.



Background-position:center 0;
The meaning of the above sentence is the position of the picture, centered, left-aligned.