CSS how to make a background picture stretch fill avoid repeated display

The question of how to stretch the background picture to fill is as simple as it sounds. But I regret to tell you. It's not as simple as we think.
such as a container (Body,div,span) set a background. The height-to-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 control the display of background pictures. so there are 2 categories that are commonly used as background pictures :

1. It's a whole big picture, size and area fit exactly.
2. A very small bar chart, through the repeat, forming a very regular large picture background.

But the situation was improved after the CSS3 appeared. The Background-size attribute can make our previous hopes come true.
And this property can be used on both Firefox,chrome and IE9.

The specific use of the following methods:
Background Chart Dimensions (numerical representation):

Copy Code code as follows:


#background-size{


background-size:200px 100px;


}

Background Chart Dimensions (percentage representation):

Copy Code code as follows:


#background-size2{


background-size:30% 60%;


}

Background figure dimensions (equal ratio extended picture to fill element, i.e. cover value):

Copy Code code as follows:


#background-size3{


Background-size:cover;


}

Background figure size (equal to smaller picture to fit element size, i.e. contain value):

Copy Code code as follows:


#background-size4{


Background-size:contain;


}

Background Figure size (fills the element with the picture itself, that is, the auto value):

Copy Code code as follows:


#background-size5{


Background-size:auto;


}