Introduction to the characteristics of the background attribute in css

This article brings you an introduction to the characteristics of the background attribute in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Abbreviation order: color-image-repeat-attachment-position

eg:body{background:#ffffff url('img.png') no-repeat right top}

Let’s introduce the characteristics of each attribute in order:

1. background-color: red; #ffffff; rgb (255,255,255);

Three color representation methods, namely Color name, hexadecimal and RGB; background color can be set for all elements; default is transparent.

2. background-image: url ('img.jpg')

The image address can be a relative path or an absolute path; the default is tiled and repeated display;

3. background-repeat: repeat-x; repeat-y; no-repeat;

Default tiled repeat display;

4. background-attachment: scroll; fixed; local; inherit;

background-attachment means whether the background image is fixed or scrolls with the rest of the page; the default is scroll;

scroll means that the background image scrolls with the rest of the page; fixed means fixed ; inherit is inherited from the parent element; local scrolls with the scrolling element.

5. Background-position: bottom center; top; 66% 33%; 50px 100px;

4 representations: one is top, left, bottom, right, center combination; two is a value, the system defaults to center; three is a percentage; four is to write pixels directly.

The latter two have high accuracy.

6. background-clip: border-box; padding-box; content-box; specifies the drawing area of ​​the background image.

7. background-origin: border-box; padding-box; content-box; specifies the positioning area of ​​the background image.

Note: If the background-image background-attachment is "fixed", this attribute has no effect.

8. background-size: auto (default); length (two values, one width and one height. If there is one value, the second one is auto by default); percentage (the assignment principle is the same as length); cover (this will maintain the aspect ratio of the image and scale the image to the minimum size that will completely cover the background positioning area);contain (the aspect ratio of the image will be maintained and the image will be scaled to the minimum size that will fit within the background positioning area);

Related recommendations:

CSS: background color/background image_html/css_WEB-ITnose

##CSS background you don’t know— Complete solution to css background properties

The above is the detailed content of Introduction to the characteristics of the background attribute in css. For more information, please follow other related articles on the PHP Chinese website!