Use CSS3 to design the background image to automatically scale the full screen display effect

 CSS3 design background image auto-scaling full-screen display effect is the basis of many new generations of web design. This effect is that the background image automatically zooms to the full screen as the web page size zooms. It is very simple to design such an effect. Just add CSS the background attribute combination CSS3 's background-size property, both with them will be able to design an automatic full screen background picture display of results, we will be in the background add background images and picture presentation attributes, but also in background-size property to set the background The way the picture is filled, the actual visual effect is not bad, and it is also supported by various new versions of mainstream browsers.

Use CSS3 to design the background image to automatically zoom the full screen display effect example syntax

<style>
body{
margin:0px;
padding:0px;
background:#fff url(background image URL) center center fixed no-repeat;　//Set the presentation method of the
background image background-size: cover;　//Set the background image Filling method
}        
</style>

Through the above setting method, the background image can be automatically scaled with the size of the browser window, and it will fill the entire browser window. The " margin :0px;" and " padding :0px;" in the syntax mean the body tag of the main page The outer and inner distances are set to 0, and then the setting method of the background property is explained as follows:

background:#fff url(background image URL) center center fixed no-repeat;

Each parameter from left to right means this

background: background color background image centered in the horizontal direction and centered in the vertical direction. The position of the background image is fixed and the background image is not displayed repeatedly;

The last "background-size: cover;" means that the background image should fill the entire container, which is the entire browser window according to the above design.

In addition, the effect that the background image of the webpage automatically fills and zooms automatically uses the background attribute instead of the background-image background image attribute.