background-size attribute in css_html/css_WEB-ITnose

Value type of background-size: 1 or 2 values. These values ​​can be either pixels px, percentage % or auto, or specific values ​​cover, contain.

Background-size can set 2 values, 1 is required and 1 is optional.
The first value is used to specify the width of the background image, and the second value is used to specify the height of the background image. If only one value is set for background-size, the second value defaults to auto height ( Usually the default height is auto, which increases according to the content. Usually if you want the height to be adaptive, you don’t need to set it) (except for specific values ​​of cover and contain).

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px;
}

Equivalent to:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px auto;
}

View the specific DEMO: background-size value definition. When you use firebug to capture the 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 second value to auto, and then compare it with the DEMO instance, their effects will be the same.

Specific values ​​of background-size:

cover: Maintain the aspect ratio of the image itself and scale the image to just completely cover the area defining the background;
contain: Maintain the aspect ratio of the image itself Width to height ratio, scale the image to a width or height that exactly fits the area defining the background;
cover value:

div{
background-image:url(test.png);
background -repeat:no-repeat;
background-size:cover;
}

In the above example, the background image will cover the entire div area. Check out the specific DEMO: background-size:cover.

contain value:

div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:contain ;
}

In the above example, the background image will be scaled to either side of the width or height to fit the div area. Check the specific DEMO: background-size:contain.