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

How to make the background image stretch and fill, this question sounds 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, p, 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 types of background pictures:
1. A whole large picture, the size of which exactly matches the area size
2. A very small bar picture, after repeating , forming a very regular large picture background.
But after css3 appeared, this situation was improved. The background-size property can make our previous wishes come true.
And this property can be used on firefox, chrome, and ie9.
The specific usage is as follows:
Background image size (numeric representation):

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

Background image size (percentage representation):

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

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

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

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

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

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

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

More css How to make the background image stretch and fill to avoid repeated display For related articles, please pay attention to the PHP Chinese website!