Comment: However, after css3 appeared, the repeated display situation was improved. The background-size property can make our previous hope of stretching and filling the background image come true. The specific usage method is as follows. Interested friends can refer to it. I hope it will be helpful to everyone.
How to make the background image stretch fill, this question sounds simple. But I'm sorry to tell you. Not as simple as we think.For example, set a background in a container (body, div, span). The length and width value of this background cannot be modified before css2.1.
So the actual result is that it can only be displayed repeatedly, so the properties such as repeat, repeat-x, repeat-y, no-repeat appear. It is used to control the display of background images. Therefore, there are two types of background pictures:
1. It is a whole large picture, the size and area size just match
2. A very small bar chart, after passing through the repeat, forms a very regular large picture background.
However, after css3 appeared, this situation was improved. The background-size property can make our previous hopes come true.
And this property can be used on firefox, chrome, and ie9.
The specific usage method is as follows:
Background image size (numerical representation):
#background-size{
background-size:200px 100px;
}
Background image size (percentage representation):
#background-size2{
background-size:30% 60%;
}
Background image size (equivalent to extend the image to fill the element, i.e. cover value):
#background-size3{
background-size:cover;
}
Background image size (reduce the image in an equal ratio to adapt to the size of the element, that is, contains value):
#background-size4{
background-size:contain;
}
Background image size (fills elements with the size of the image itself, i.e. auto value):
#background-size5{
background-size:auto;
}