CSS background properties and CSS3 background picture settings summary sharing

In CSS, there are several background properties

Properties	Description	CSS
Background	Set all the background properties in a declaration.	1
Background-attachment	Sets whether the background image is fixed or scrolls along with the rest of the page.	1
Background-color	Sets the background color of the element.	1
Background-image	Sets the background image of the element.	1
Background-position	Sets the start position of the background image.	1
Background-repeat	Sets whether and how the background image is repeated.	1
Background-clip	The drawing area that specifies the background.	3
Background-origin	Specifies the location area of the background image.	3
Background-size	Specifies the size of the background image.	3

From the table, we can see that background-clip, Background-origin and Background-size are new properties in CSS3.

' Background '-' clip ': Border-box | Padding-box | Content-box | No-clip

The clipping area used to determine the background.
Engine type Gecko Webkit Presto:

Background-clip-moz-background-clip-webkit-background-clip-o-background-clip

Note: This property does not support ie6,7,8
A picture to understand the difference between three attribute values:

Background-size: [<length> | <percentage> | Auto]{1,2} | Cover | Contain

Cover: Expand the background image to be large enough to allow the background image to completely cover the background area.
Some parts of the background image may not appear in the background positioning area.
Contain: Expands the image image to the maximum size so that its width and height are fully adapted to the content area.

Background-origin:border | padding | Content

Value:
Border: The background is displayed starting from the border area.
padding: The background is displayed starting from the padding area.
Content: Displays the background from the content area.

Background picture settings for CSS3
1. Background image start position Background-origin

Background-origin	value
Border-box	Border
Padding-box	Padding (default)
Content-box	Content Area

Background-origin:border-box | Padding-box | Content-box;
Note: The background must be set to No-repeat
2. Background image clipping Background-clip

Background-clip	value
Border-box	Border (default value)
Padding-box	Inner margin
Content-box	Content Area
No-clip	No cropping, same as Border-box effect

3. Set the size of the background picture background-size

background-size	value
Auto	Default value, does not change the original height and width of the background picture
Length value	Paired appearance such as 200px 50px, set only one value, equal scale
Percentage	Any value between 0%~100%, set only one value, and so on scale
Cover	覆盖, the background image is scaled to the full overlay container, and the background image may be out of the container.
Contain	容纳, the background image is always included in the container, such that the background image is equal to the width or height of the container, and so on.