Background-size attribute in css

Background-size attribute in css
Value Type of background-size: one or two values, which can be pixel px, percentage %, auto, or specific value cover or contain.

Background-size can be set to 2 values. One value is required and the other value is optional.
1st values are used to specify the width of the background image, and 2nd values are used to specify the height of the background image. If only one value is set for background-size, the default value of 2nd is auto height (the default height is auto, and the value increases with the applicable content. Generally, if you want to adjust the height, you do not need to set it) (except for the specific values of cover and contain ).

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

It is equivalent:

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

View the 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 2nd values to auto, and then compare them with the DEMO instances, they will have the same effect.

Specific value of background-size:

Cover: maintain the high aspect ratio of the image, and scale the image to a region that exactly overwrites the defined background;
Contain: maintain the high aspect ratio of the image, and scale the image to the width or height to adapt to the area that defines the background;
Cover value:

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

In the preceding example, the background image overwrites the entire div area. View the DEMO: background-size: cover.

Contain value:

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

In the preceding example, the background image scales to any side of the width or height to adapt to the div area. View the DEMO: background-size: contain.