"Web front-end notes" CSS lets background images stretch filled properties

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