Background tag Summary in the most complete CSS

In CSS development we often use background, this article is mainly for everyone to bring a CSS background all summarized. Small series feel very good, and now share to everyone, but also for everyone to do a reference, hope to help everyone.

All background properties cannot be inherited.

1. Background-color

All elements can have a background color set.

The default value for 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 the background image;

Background image can be set multiple, separated by commas, background image will be stacked, written in front of the level above.

3. Background-repeat

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

4. Background-attachment

Scroll (default)/fixed

5. Background-position

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

Percent method: The percentage is applied to both the image and the element, and the corresponding point coincides with the location. If you specify only a percentage, it means that the vertical direction is 50%.

Keyword method: Top, right, bottom, left, center for the combination of positioning; If you specify only one value, the second value defaults to center.

Note: The 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

Sets 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, and if there is only one value, the second value is auto.

Percent method: calculated as the base of the parent element's width and height.

Keyword cover, does not change the image aspect ratio, the horizontal and vertical direction is full of the entire element, it is possible to cause some image overflow.

The keyword contain, does not change the image aspect ratio, stretches as far as possible, until One direction fills the entire element, may cause the other party to be not covered.

7. Background-origin

Define the initial position of the background image

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

Padding-box,padding the upper-left corner of the area, 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 explanation in English is more clear)

(English is handled from W3Schools online)

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

About the background CSS writing, the individual think should be logical clear, hierarchical, 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 has a background image on a website this covers the entire browser window at all times.

The requirements is 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 was always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust it size with the Background-size property:

CSS code copy content to clipboard

1. HTML {

2. Background:url (img_flower.jpg) no-repeat Center fixed;

3. Background-size:cover;

4. }

Small tips:

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

(At present, only the idea, not yet found the image that meets the needs.) ）