A brief analysis of the usage of background in CSS

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.

Definition and usage

Basic attributes: color, image, position, repeat

Background colorbackground-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 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-repeatbackground-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 positionbackground-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;

Extra attributes

Background-scrollbackground-attachment

Specifies how the background scrolls when the content scrolls.

##scrollDefault value . Scroll, the background image moves as the page scrolls. #fixed Fixed so that the background image does not move when the rest of the page is scrolled.

Value	Description

Related recommendations:

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!