Background-size attribute in css, cssbackground-size

Background-size attribute in css, cssbackground-size
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.
One of the newly added attributes of css3 is background-size: cover. How can this problem be compatible with IE ??

Our solution to this problem is to use img;
Listen to the resize event of the window.
The callback function logic of resize is as follows:
When the window aspect ratio is greater than the image aspect ratio, the image width is set to 100%, and the height is set to auto
When the aspect ratio of a window is smaller than the aspect ratio of an image, the image height is set to 100%, and the width is set to auto.
During dom loaded, call the resize callback function first.

Different attributes of background and _ background in css

1. _ background is the hank attribute of IE6. "_" is added before the style attribute, which can only be identified by ie6. The style runs from yearning until it cannot be executed.

For example
Style {
Color: #000000;/* FF, OP supported */
Color: # 0000FF \ 9;/* all IE browsers (ie6 +) support; however, IE8 cannot recognize css hack of "*" and; so we can write hack */
[Color: #000000; color: #00FF00;/* SF, CH support */
* Color: # FFFF00;/* IE7 supported */
_ Color: # FF0000;/* IE6 support */
}

2. For details about * html. imbox
It also belongs to the hank of ie 6. It is set to solve the specific problem of ie 6.