CSS background summary

This article mainly explains the “CSS background summary”, the content of the explanation in the article is simple and clear, easy to learn and understand, please follow the editor’s thinking slowly and deeply, and study and learn the “CSS background summary” “Bar!

All background attributes 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, then the background is transparent, so that the background of its ancestor elements can be visible.

2. background-image

All elements can be set with background images;

Multiple background images can be set, for intermediate use Separate by commas; the background image will be stacked, and the previous layer will be written on it.

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 distance of horizontal movement, and the second value is the distance of vertical movement; if only one value is specified, the second value is 50% by default.

Percentage method: The percentage is applied to the image and the element at the same time, and the corresponding points overlap for positioning. If only one percentage is specified, 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 a negative value.

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, the second value sets the height; if there is only one value, the second value is auto.

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

The keyword cover does not change the ratio of the width to height of the image. It fills the entire element in both the horizontal and vertical directions, which may cause a part of the image to overflow.

Keyword contain, do not change the ratio of width to height of the image, stretch as much as possible until the entire element is covered in one direction, which may cause the other direction to not be covered.

7. background-origin

Define the initial position of the background image

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

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

content-box, the 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

(The English explanation is clearer)

(English They are all carried 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 of the background, I personally think that it should be clear and layered; specifically:

background defines the background Image, background-color defines the background color, 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

&bull ; 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;

  3. backgroundsize: cover;

小 tips:

Use the horizontal tiling of the background image to achieve a wave-like border effect.

Thank you for reading. The above is the content of “CSS background summary”. After studying this article, I believe that everyone has a deeper understanding of the issue of CSS background summary, and the specific usage situation It needs to be verified by everyone. This is Tumi Cloud. The editor will push more articles about relevant knowledge points for everyone, welcome to pay attention!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment