For example, set a background in a container (Body,div,span). The long-width value of this background cannot be modified until css2.1.
So the actual result is only repeated display, so there are repeat,repeat-x,repeat-y,no-repeat these properties. is used to
Controls the display of background images. So there are 2 categories that are commonly used as background images:
1. It's a whole big picture, size and area exactly match
2. A very small bar chart, through repeat, forms a very regular large picture background.
But after the advent of CSS3, the situation was improved. The Background-size property can make our previous hopes come true.
And this property can be used on firefox,chrome, as well as IE9.
Here's how to use it:
Background image size (numeric representation):
#background-size{
background-size:200px 100px;
} background map size (percent representation):
#background-size2{
background-size:30% 60%;
} The size of the background map (equal to the image to fill the element, that is, the cover value):
#background-size3{
Background-size:cover;
} The size of the background map (and so on to fit the dimensions of the element, i.e. the contain value):
#background-size4{
Background-size:contain;
The size of the background map, which fills the element with the size of the picture itself, which is the auto value:
#background-size5{
Background-size:auto;
}
Reference Original: http://www.3lian.com/edu/2013/07-12/80562.html
"Web front-end notes" CSS lets background images stretch filled properties