How CSS makes a background picture stretch fill to avoid repeated display

How to make the background picture stretch and fill it sounds like a simple question. 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 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. It is used to control the display of the background image. 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 CSS3After the appearance, 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, i.e. the cover value):

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

The size of the background map (equal to the size 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, the auto value:

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