CSS3--Background size (background-size)

1, background description

CSS2, Background property:

Writable, detachable
Background: [<background-color>]<Background-image  >[,<background-repeat>] [<background-attachment  >[,<background-position>]

　　= = "Background-color:Red (color name),#FF0000 (binary), RGB (255, 0, 0), RGB (100%, 0%, 0%), HSL (0, 100%, 50%). RGBA (255,0,0,1) is also available in CSS3.

　　= = "Background-image: None | | <url>.

　　= = "Background-repeat: Repeat | | repeat-x | | repeat-y | | no-repeat.

　　= = "Background-attachment: Scroll | | fixed.

(Background-attachment is primarily used to set whether the background image is fixed or scrolled along with the rest of the page, and its default value is scroll, which means that the background picture scrolls with the scroll bar, and the background image is fixed when the value fixed.) ）

　　= = "Background-position: <percentage> | | <length> | | [Left|center|right] [, Top|center|bottom].

CSS3, the background attribute adds a new　　 background-size (background size), Background-clip(background clipping), Background-origin(background origin).

　　

2, background-size syntax, value

< length > < percentage > | | Cover | | Contain

= = "Auto: default value, keep the original height and width of the background picture; "

= = "Cover: background image enlarged to fit the entire container; (background image distortion)

　　　　 (Scene): when the picture is smaller than the container and cannot be implemented using Background-repeat, cover can be used.

　　= = "contain: This value is just the opposite of cover, the background image shrinks to fit the entire container; (Background image distortion)

　　　　(Scene): when the background picture is larger than the element container, the background picture needs to be displayed.

　　= = "<LENGTH>: set a specific value to change the size of the background image .

　　= = "<PERCENTAGE>: hundred points, but any value between 0%?100%, this value can only be applied to the block element , the set percent will use the background picture size according to the width of the element to calculate the percentage.

3, Background-size compatible

　　

More compatibility scenarios:

4. Background-size Usage

/*mozilla*/-moz-background-size:auto | |<length>||<percentage>| | | cover | | contain/*webkit*/-webkit-background-size:auto | |<length>||<percentage>| | | cover | | contain/*presto*/-o-background-size:auto | |<length>||<percentage>| | | cover | | contain/*W3C standard */Background-size:auto | |<length>||<percentage>|| Cover | | Contain

There is a filter in IE that is similar to cover: (If you use a filter, Background-size:cover is not supported in IE6.) ）

Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src= '. /images/background-image.jpg ', sizingmethod= ' scale ');-ms-filter: "Progid:d XImageTransform.Microsoft.AlphaImageLoader (src= '. /images/background-image.jpg ', sizingmethod= ' scale ');

Organized from:(w3cplus) CSS3 background-size

CSS3--Background size (background-size)