Summary and sharing of CSS background property and CSS3 background image settings

In css, there are several background attributes as follows

Attribute	Description	CSS
background	Set all background properties in one statement.	1
background-attachment	Set whether the background image is fixed or scrolls with the rest of the page.	1
background-color	Set the background color of the element.	1
background-image	Set the background image of the element.	1
background-position	Set the starting position of the background image.	1
background-repeat	Set whether and how to repeat the background image.	1
background-clip	Specifies the drawing area of ​​the background.	3
background-origin	Specifies the positioning 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 in css3 Attributes.

`background`-`clip`：border-box | padding-box | content-box | no-clip

is used to determine the cropping area of ​​the background.
Engine type Gecko Webkit Presto:

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

Note: This attribute does not support IE6, 7, 8
One picture can understand the difference between the three attribute values:

background-size ：[ <length> | <percentage> | auto ]{1,2} | cover | contain

cover: Expand the background image large enough so that the background image completely covers the background area.
Some parts of the background image may not be displayed in the background positioning area.
contain: Expands the image to its maximum size so that its width and height fit entirely within the content area.

background-origin ： border | padding | content

Value:
border: Display the background starting from the border area.
padding: Display the background starting from the padding area.
content: Display the background starting from the content area.

CSS3 background image settings
1. Background image starting position background-origin

##border-boxBorderpadding-boxPadding (default)content-boxContent area

background-origin	value

##background-origin: border-box | padding-box | content-box;

Note: The background must be set to no- repeat
2. Background image cropping background-clip

##background-clipvalueborder-boxBorder (default value)padding-boxInside Margincontent-boxContent areano-clipDo not clip, with The effect of border-box is the same3. Set the size of the background image background-size

background-sizevalue##autoDefault value, do not change The original height and width of the background imageappears in pairs such as 200px 50px, only sets one value, and scales proportionallyAny value between 0%~100%, only set one value, scale proportionallyOverlaycontain

	The length value
	Percentage
	cover
, scale the background image proportionally to completely cover the container. The background image may exceed the container.	contain
, scale the background image proportionally to the width or height equal to the width or height of the container, the background image is always included inside the container.

The above is the detailed content of Summary and sharing of CSS background property and CSS3 background image settings. For more information, please follow other related articles on the PHP Chinese website!