The most comprehensive summary of background tags in CSS

We often use background in CSS development. This article mainly brings you a summary of CSS background. The editor thinks it is quite good, so I will share it with you now and give it as a reference. I hope it can help everyone.

All background properties cannot be inherited.

1. background-color

All elements can set the background color.

The default value of background-color is transparent; that is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements is visible.

2. background-image

All elements can set background images;

You can set multiple background images, separated by commas; the background images will cascade, write The level in front is on top.

3. background-repeat

repeat (default)/no-repeat/repeat-x/ repeat-y

4. background-attachment

scroll (default)/fixed

5. background-position

Pixel method: Taking the upper left corner of the image as the starting point, the first value is the horizontal movement distance, and the second value is the vertical movement distance; if only one value is specified, the second value defaults to 50%.

Percentage method: The percentage is applied to both the image and the element, and the corresponding points coincide for positioning. If you specify only a percentage, it means that the vertical direction is 50%.

Keyword method: top, right, bottom, left, center for combined positioning; if only one value is specified, the second value defaults to center.

Note: background-position can be negative.

By default, the background color extends below the border, and the background image is in the upper left corner of the padding area.

6. background-size

Set the size of the background image; the default value is auto.

Pixel method: The first value sets the width, and the second value sets the height; if there is only one value, the second value is auto.

Percent method: Calculated based on the width and height of the parent element.

The keyword cover does not change the aspect ratio of the image and covers the entire element in both horizontal and vertical directions, which may cause part of the image to overflow.

The keyword contain does not change the aspect ratio of the image, and stretches it as much as possible until the entire element is covered in one direction, which may result in the other direction not being covered.

7. background-origin

Define the initial position of the background image

border-box, the upper left corner of the border.

padding-box, upper left corner of padding area; default value.

content-box, upper left corner of the content area.

8. background-clip

The CSS3 background-clip property specifies the painting area of ​​the background.

The property takes three different values:

•border-box - (default) the background is painted to the outside edge of the border

•padding-box - the background is painted to the outside edge of the padding

•content- box - the background is painted within the content box

（English explanation is clearer）

（English is moved from W3Schools Online）

About background -origin and background-clip, they are independent of each other and do not interfere with each other.

Regarding the CSS writing method of background, I personally think it should be logically clear and hierarchical; specifically:

background defines the background image, background-color defines the background color, and background-clip defines the background display area. .

(Personal opinion, for reference only)

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times .

The requirements are as follows:

• Fill the entire page with the image (no white space)

• Scale image as needed

• Center image on page

• Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

CSS CodeCopy content to clipboard

1. ##html {

2. background: url(img_flower.jpg) no-repeat center fixed;

## background-size: cover;
}
Tips:

Use the horizontal tiling of the background image to achieve a wavy border effect.

(Currently I only have ideas and haven’t found any images that meet my needs.)

Related recommendations:

The above is the detailed content of The most comprehensive summary of background tags in CSS. For more information, please follow other related articles on the PHP Chinese website!