Introduction to the use of background-size properties in CSS

Background-size value type: One or 2 values that can be either pixel px, percent% or auto, or a specific value cover, contain.

Background-size can set 2 values, 1 are required, and 1 are optional.
The 1th value specifies the width of the background chart, the 2nd value specifies the height of the background chart, and if only 1 values are set for Background-size, the 2nd value defaults to auto height automatically (usually the default height is auto automatically, and the content is increased, Usually if you want to be highly adaptive without setting it (except for cover and contain specific values).

copy code code as follows:


div{


Background-image:url (test.png);


background-repeat:no-repeat;


background-size:100px;


}

Equivalent to:

copy code code as follows:


div{


Background-image:url (test.png);


background-repeat:no-repeat;


background-size:100px Auto;


}

View the value definition for the specific demo:background-size. When you use Firebug to crawl to that instance node, you will find that the second value is automatically added and the value is auto. Of course, you can also manually set the 2nd value to auto, and then compare it to the demo instance, and they will have the same effect.

Specific values for Background-size:

Cover: To maintain the width and height of the image itself, zoom the picture to the area that exactly covers the defined background;
Contain: To maintain the width and height of the image itself, zoom the picture to the width or height of the area that fits the definition background;
Cover Value:

The code is as follows:


div{


Background-image:url (test.png);


background-repeat:no-repeat;


Background-size:cover;


}

In the example above, the background picture will cover the entire Div area. View specific demo:background-size:cover.

Contain value:

The

code is as follows:


div{


Background-image:url (test.png);


background-repeat:no-repeat;


Background-size:contain;


}

In the example above, the background image will be scaled to any side of the width or height to accommodate the div area. View specific Demo:background-size:contain.