About how to use CSS background

The following is a summary of all CSS backgrounds. The content is quite good, so I will share it with you now and give it as a reference.

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 a background image;

You can set multiple background images, separated by commas; The background image will cascade, with the layer written in the previous layer on top.

3. background-repeat

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

4. background-attachment

scroll (default)/fixed

5. background-position

Pixel method: starting from the upper left corner of the image , the first value is the horizontal movement distance, 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）

Regarding 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 clearly logical 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:

html {   
     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 I haven’t found an image that meets my needs.)

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to PHP Chinese net!

Related recommendations:

About the use and pitfalls of enabling hardware acceleration in CSS3

About how to write CSS code specifications

The above is the detailed content of About how to use CSS background. For more information, please follow other related articles on the PHP Chinese website!