The background image fills the screen_html/css_WEB-ITnose

How to use css background image to stretch and display 100% full screen? This question may sound simple. But I'm sorry to tell you. It's not as simple as we think.
For example, set a background in a container (body, div, span). The length and width values ​​of this background cannot be modified before CSS2.1.
So the actual result can only be displayed repeatedly, so the attributes repeat, repeat-x, repeat-y, and no-repeat appear. It is used to control the display of background images. So there are two categories that are generally used as background images:

1. It is a whole large image, the size of which exactly matches the size of the area
2. A very small bar image, After repeating, a very regular large picture background is formed.

But after the emergence of CSS3, this situation has been improved. The background-size property can make our previous wishes come true.
And this attribute can be used on firefox, chrome, and ie9.

The specific usage is as follows:
Background image size (numeric representation):

The code is as follows:

#background-size{ background-size:200px 100px; } 

Background image size (in percentage):

The code is as follows :

#background-size2{ background-size:30% 60%; } 

Background image size (expand the image proportionally to fill the element, that is, cover value ):

The code is as follows:

#background-size3{ background-size:cover; } 

Background image size (reducing the image proportionally to fit the size of the element, that is, the contain value):

The code is as follows:

#background-size4{ background-size:contain; } 

Background image size (fill the element with the size of the image itself, that is, the auto value):

The code is as follows:

#background-size5{ background-size:auto; }