The content of this article is about a brief analysis of the usage of background background in CSS. It has a good reference value. I hope it can help friends in need.
background-color
The value is Choose one of the color value or transparent. The default value is transparent (transparent).
The color value can be a hexadecimal color code or an RGB color value, or an English code. It is not recommended to use English codes. Different browsers may have different effects on different color codes.
It is also important to set the background color as a fallback. Background colors are supported everywhere, while more exotic features like background gradients are only supported in newer browsers, plus background images may not load for some reason. Therefore, it is a good idea to set a basic background color and specify these properties, so the content of the element is readable no matter what.
background-image
Specify the background image to be displayed, and use url() to set the path.
The default image repeating method is to repeat both horizontally and vertically.
background-repeat
Specifies how the background image repeats. The default value is repeat (repeat all the time, until the entire element's background is filled)
| value | description |
|---|---|
| no -repeat | No repeat |
| repeat | Repeat both vertically and horizontally |
| repeat-x | Repeat in X-axis direction (horizontal) |
| repeat-y | Repeat in Y-axis direction (vertical) |
background-position
Specify the position of the background image, the origin is the upper left corner (0,0).
You can enter two values to represent the X-axis and Y-axis, or you can enter only one value.
You can enter length values (px, etc.), relative values (rem, etc.), percentages, keywords (left, center, right,top,bottom)
If you enter only one value, it represents the value of the X-axis, Y-axis Become center
Values can be mixed and matched, such as background-position:9px top;
background-attachment
Specifies how the background scrolls when the content scrolls.
| Value | Description |
|---|---|
| Default value . Scroll, the background image moves as the page scrolls. | |
| Fixed so that the background image does not move when the rest of the page is scrolled. |
Usage of border-sizing attribute in css
The above is the detailed content of A brief analysis of the usage of background in CSS. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
