CSS lets the background picture stretch the filled properties

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

Controls 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):

#background-size{

background-size:200px 100px;

Background Chart Dimensions (percentage representation):

#background-size2{

background-size:30% 60%;

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

#background-size3{

Background-size:cover;

Background figure size (equal to the size of the element, i.e. contain value):

#background-size4{

Background-size:contain;

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

#background-size5{

Background-size:auto;

}