A box’s background color is transparent by default, so the background of the parent element passes through the child element. The background of the box is either a color or a picture, which can be multiple.

background-image

Can define a picture or more pictures, each picture can be independently controlled size, positioning, etc. For example, background-clip and background-position, their values can be multiple values separated by commas, and they can correspond to the image defined by background-image one by one. It also pays attention to a principle that if the number of attribute values is more than the number of pictures, the number of attribute values will be ignored. If the number of attribute values is less, the previous value will be recycled again.

Background-image can also be None, which still takes up one layer

.myDiv {
    background-image: url("1.png"), url("2.png");
    background-clip: border-box, padding-box;
}
Copy the code

background-color

Define the background color of the box. It will be placed at the end of all background-images. The background color can also be clipped, usually using background-clip. The clipping of the background color is the same as the background-clip value of the bottom image.

background-repeat

Define the tile mode of the picture, divided into two directions, horizontal axis and vertical axis, the value is:

  • Repeat -x, horizontal repeat
  • Repeat -y, longitudinal repeat
  • The part that is beyond will be clipped
  • Space, first decide the beginning and end pictures, and then decide the middle pictures. Put as many pictures as you can in the middle, and the space is equal
  • Round compresses other images to make sure the last image is down
  • A no-repeat B no-repeat C no-repeat D no-repeat

background-origin

Each background image will have its location area, from which you can use background-position to set the offset of the image. The value of this attribute can be:

  • border-box
  • padding-box
  • content-box

background-position

Define the initial positioning position of each background image, which can be separated by commas to correspond to each background image.

Every value is divided into two parts, on behalf of the horizontal and vertical direction, horizontal value left | center | | right length – percentage, vertically value for top | center | | bottom length – percentage. Here are some examples

  • background-position: left; // If there is only one value, the second value defaults to center
  • background-position: left top
  • background-position: right 10px top 10px;
  • background-position: 10px top; // The first part is the left offset 10px
  • background-position: 50% top;

background-clip

Used to crop the background image or color. If both the background image and the background color are set, the background color is cropped according to the cropping method of the bottom background image.

background-size

Define the size of each background image, width and height.

background-attachment

Defines the background image relative to whom it is positioned

  • Fixed, the background image is positioned relative to the viewport, and the background-origin of the background image is ignored
  • Local, the background image will be filled as long as the content is located relative to the content of the element (beyond the wrapped element). When you scroll the background image will move with the content.
  • Relative to the element positioning, how big the element is, how much space will be filled by the background picture. If the scrollbar can appear, the background picture will not move when sliding the scrollbar.