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

Comments: But after css3 appears, this duplicate display is improved. The background-size attribute makes our previous hopes of stretching and filling the background image come true. For details about how to use this attribute, refer to the following, the question of how to stretch and fill the background image may seem 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 ):

The Code is as follows:
# Background-size {
Background-size: 200px 100px;
}

Background image size (percentage representation ):

The Code is as follows:
# Background-size2 {
Background-size: 30% 60%;
}

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

The Code is 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 ):

The Code is as follows:
# Background-size4 {
Background-size: contain;
}

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

The Code is as follows:
# Background-size5 {
Background-size: auto;
}