CSS background summary and CSS background summary

CSS background summary and CSS background summary

All background attributes cannot be inherited.

 

1. background-color

The background color can be set for all elements.

The default value of background-color isTransparentThat is to say, if a background color is not specified for an element, the background is transparent so that the background of the ancestor element can be visible.

 

2. background-image

Background images can be set for all elements;

You can set multiple background images separated by commas (,). Background images are stacked and written on the front layer.

 

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 moving distance, and the second value is the vertical moving distance. If only one value is specified, the second value is 50% by default.

Percentage method: percentages are applied to images and elements at the same time, and corresponding points overlap for positioning. If only one percentage is specified, the vertical direction is 50%.

Keyword Method: top, right, bottom, left, and center are combined for positioning. If only one value is specified, the second value is center by default.

Note: The value of background-position can be negative.

 

By default, the background color extends to the bottom of 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: Set the width of the first value and the height of the second value. If there is only one value, the second value is auto.

Percentage method: calculates the width and height of the parent element based on the baseline.

The keyword "cover" does not change the image width/height ratio. If the entire element is filled in both the horizontal and vertical directions, some images may overflow.

The keyword contain does not change the image width and height ratio. Stretch as much as possible until the entire element is filled in one direction. This may cause the other direction to be not filled.

 

7. background-origin

Define the initial position of the background image

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

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

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

 

8. background-clip

The CSS3background-clipProperty 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

(The English explanation is clear)

(W3Schools Online shipping in English)

 

Background-origin and background-clip are independent of each other and do not interfere with each other.

 

I personally think that the CSS Writing Method of background should have clear logic and clear layers. 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:

1 html {2     background: url(img_flower.jpg) no-repeat center fixed; 3     background-size: cover;4 }

 

Small tips:

Uses the horizontal Tile of the background image to achieve the wavy border effect.

(Currently, there are only ideas and no images that meet the requirements have been found .)