CSS background property background, css background

CSS background property background, css background

The background attribute is short for all background attributes:

These background attributes are as follows:

Background-color: background color

You can set it by the color name (red/green/blue ).

You can also use hexadecimal notation (# fff/#000/# bcbcbc)

You can also use rgb (x, x, x) x values (0 ~ 255)

Background-position: Start position of the background

There are also three value options. The first one is to combine the acronyms (top/right/bottom/left), such as left top

% X %. For example, 0% 0% indicates the upper left corner.

Expressed in pixels, for example, 100px 100px

Background-size: background size

You can adjust the background size by setting a given length, such as background-size: 100px 80px;

You can also set the percentage. Note that the percentage here refers to the background location area, rather than the original size of the image. Example: background-size: 50% 50%;

Background-repeat: Repeated background settings

No-repeat: no duplicates

Repeat-x: x (horizontal) duplicates

Repeat-y: y (vertical)

Repeat: repeated

Background-origin: Specifies the relative position of the background-position attribute.

Padding-box: relative position of the background fill box

Border-box: relative position of the background border

Content-box: the position of the content box relative to the background

<! Doctype html> 
Effect:

Background-clip: the area where the background is drawn.
It has three values: padding-box, border-box, and content-box.
<! Doctype html> 
 
Effect:

 
Background-attachment: whether the background is fixed or scrolling with the page

Fixed: fixed
Scroll: scroll (default)
Background-image: background image
Url: Image path