Html css-understanding of background (1)

When returning to the bug today, I accidentally saw the background attribute in the style sheet. Now, let's summarize:

1. background-color: Set the background color of the element. The values can be: color-name, color-rgb, color-hex, and transparent;

2. background-image: Set the background image of the element. The value can be url or none;

3. background-repeat: Set whether the element background image is repeated and how it is repeated. The values can be repeat, repeat-x, repeat-y, and no-repeat. Here it is necessary to describe the value:

A. repeat: The repetition direction is the X axis and Y axis, that is, the image will fill the element area horizontally and vertically. Note: When learning, try to use a small image, otherwise the effect will not be visible, such:

B. repeat-x: the repeat direction is the x axis, that is, the image will only fill the element area horizontally, and the vertical area will not overlap, for example:

C. repeat-y: The repeat direction is the y axis, that is, the image will only fill up the element area vertically, and the horizontal area will not overlap, for example:

D. no-repeat: the X axis and Y axis are not repeated, that is, the horizontal and vertical directions are not repeated, such:

【Download the test resources]

4. background-attachment: Set whether the background image moves with the scroll bar. The values can be scroll, fixed, and inherit. The following uses examples to understand the specific meaning:

A. scroll: the background image moves with the scroll bar. That is to say, when the scroll bar is pulled down, the image moves up;

B. fixed: the background image does not move with the scroll bar. That is, when the scroll bar is pulled down, the image does not move with the scroll bar;

C. inherit: inherits the attribute value of the upper-level label. That is, if the value of the property of the upper-level label is scroll, the current label also has scroll; if the value of this attribute in the upper-level tag is fixed, the current tag also has fixed;
【Download the test resources]

5. background-position: Set the start position of the background image. The value can be:

A. top left

B. top center

C. top right

D. center left

E. center

F. center right

G, bottom left

H. bottom center

I. bottom right

J, x % y %

K. xpos ypos

For more information, see the blog: html css-background (2)