CSS Background Properties

CSS background:

Property	Describe
Background	Shorthand property, which is the setting of the Background property in a declaration.
Background-attachment	Whether the background image is fixed or scrolls along with the rest of the page.
Background-color	Sets the background color of the element.
Background-image	Set the image to the background.
Background-position	Sets the starting position of the background image.
Background-repeat	Sets whether and how the background image repeats.

1. Background color: Background-color property, set the element's backgrounds;

Range of <1> elements background:

The Background-color property sets a solid color for the element. This color fills the element's content, padding, and border areas, extending to the outer bounds of the element's border (but excluding margins). If the border has a transparent part (such as a dashed border), the background color is displayed through these transparent sections.

<2> Possible values:

Value	Describe
Color_name	Specifies the color value as the background color for the color name (such as red).
Hex_number	Specifies the background color (such as #ff0000) for which the color value is a hexadecimal value.
Rgb_number	Specifies that the color value is the background color of the RGB code (such as RGB (255,0,0)).
Transparent	The default value, the background color is transparent.
Inherit	Specifies that the settings for the Background-color property should be inherited from the parent element.

Ps:background-color cannot inherit.

2. Background Image: Background-image property, set the background image of the element;

Application of <1> elements:

The background of an element occupies the full dimensions of the element, including padding and borders, but excluding margins. By default, the background image is in the upper-left corner of the element and repeats in both horizontal and vertical directions.

<2> Possible values:

Value	Describe
Url	The path that points to the image.
None	Default value, the background image is not displayed.
Inherit	Specifies that the settings for the Background-image property should be inherited from the parent element.

Ps:background-image can not inherit, please set a usable background color, so that if the background image is not available, the page can also get good visual effect .

3. Background repeat: Background-repeat property, set the way the background tile of the element;

Value	Describe
Repeat	Default value, the image is tiled horizontally vertically
Repeat-x	The image repeats only horizontally
Repeat-y	The image repeats only in the vertical direction
No-repeat	Do not allow images to be tiled in any direction

4. Background positioning: Background-position property, set the starting position of the background image;

<1> Possible values:

value	description
top left top right center left Span style= "Font-family:microsoft Yahei; font-size:14px; " >center Center center right bottom Center bottom right	If you specify only one keyword, then the second value will be "center". Default value: 0% 0%.
X y%	The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0% 0%. The lower right corner is 100% 100%. If you specify only one value, the other value will be 50%.
Xpos ypos	The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If you specify only one value, the other value will be 50%. You can mix the% and position values.

Ps: The Background-attachment property needs to be set to "fixed" to ensure that the property works correctly in Firefox and Opera.

5. Background Association: Background-attachment Property, sets whether the background image is fixed or scrolls along with the rest of the page.

<1> Possible values:

Value	Describe
Scroll	The default value. The background image moves as you scroll through the rest of the page.
Fixed	The background image does not move when the rest of the page scrolls.
Inherit	Specifies that the settings for the Background-attachment property should be inherited from the parent element.

CSS Background Properties