How does css make the background image stretch and fill to avoid repeated display? css background image

How does css make the background image stretch and fill to avoid repeated display? css background image

The question of how to stretch and fill the background image seems very simple. But I am sorry to tell you. It's not that simple as we thought.
For example, you can set a background in a container (body, div, span. The length and width of the background cannot be modified before css2.1.
Therefore, the actual results can only be displayed repeatedly, so the attributes repeat, repeat-x, repeat-y, and no-repeat appear. Is used to control the display of background images.Therefore, there are two types of background images.:

1. It is a whole big image with the same size as the area.
2. A small bar chart uses repeat to form a very regular big image background.

However, this situation is improved when css3 appears. The background-size attribute can make our previous hopes come true.
This attribute can be used in firefox, chrome, and ie9.

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

Copy the Code as follows:

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

　　

Background image size (percentage representation ):

Copy the Code as follows:

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

　　

Background image size (extended image to fill with elements, that is, cover value ):

Copy the Code as follows:

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

　　

 

Background image size (proportional reduction of the image to adapt to the element size, that is, the contain value ):

Copy the Code as follows:

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

　　

Size of the background image (fill the element with the image size, that is, the auto value ):

Copy the Code as follows:

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