background-origin

Sets the original starting position of the element’s background image.

Grammar:

Background - origin: border - box | padding - box | content - box;Copy the code

The parameters indicate whether the background image is displayed from a border, an inner margin (the default), or a content area.

The effect is as follows:

Note that if the background is not a no-repeat, this property is invalid and will be displayed from the border.

background-clip

It is used to crop the background image to suit the actual needs.

Grammar:

Background - clip: border - box | padding - box | content - box | no - clipCopy the code

The parameters crop the background from the border, or from the inside, or from the content area, respectively. No-clip indicates no cutting, which has the same effect as the border-box parameter. Backgroud-clip The default value is border-box.

The effect is shown below:

 background-size

Set the size of the background image, display it as a percentage or length, and expand it with cover and contain.

Grammar:

Background - size: auto | < length value > | < % > | cover | containCopy the code

Values are as follows:

1. Auto: default value, does not change the original height and width of the background image;

2, < length value > : appear in pairs, such as 200px 50px, set the width and height of the background image to the first two values in turn, when setting a value, it will be used as the picture width value to scale;

3. < percentage > : any value between 0% and 100%, set the width and height of the background picture as the value obtained by multiplying the width and height of the element in turn by the previous percentage, the same as above when setting a value;

4. Cover: as the name implies, it is the cover, that is, the background image is scaled equally to fill the entire container;

Scale the background image to contain one side of the container.

multiple backgrounds

Multiple background, that is, CSS2 background attributes plus origin, clip and size of the new background multiple stack, abbreviation is each set of values separated by commas; If there are multiple background images and only one of the other attributes (e.g. background-repeat) when written in decomposition, this attribute value applies to all background images.

Syntax abbreviations are as follows:

Background:  [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...Copy the code

The abbreviations above can be broken down into the following forms:

background-image:url1,url2,… ,urlN;

background-repeat : repeat1,repeat2,... ,repeatN; backround-position : position1,position2,... ,positionN; background-size : size1,size2,... ,sizeN; background-attachment : attachment1,attachment2,... ,attachmentN; background-clip : clip1,clip2,... ,clipN; background-origin : origin1,origin2,... ,originN; background-color : color;Copy the code

Note:

  1. Separate each group of background abbreviations with a comma;
  2. If size is present, it must be followed by position separated by a “/”.
  3. If there are multiple background images and only one of the other attributes (such as background-repeat), this attribute value applies to all background images.
  4. Only one background-color can be set.

Source: MOOCs