Analysis on the usage of background background in CSS

This article introduces you to the article is about the use of CSS in the background background, there is a good reference value, hope to help the needy friends.

Definition and usage

Basic properties: color, image, position, repeat

Background colorbackground-color

The value is a color value or transparent both, and the default value is transparent (transparent).

• The color value can be 16 color codes or RGB color values, or it can be in English code. The use of English code is not recommended, different browsers for different color code processing effect may be different.

• It is also important to set the background color as a fallback. Background colors are supported everywhere, and more exotic features such as background gradients are supported only in newer browsers, and background images may not load for some reason. Therefore, it is a good idea to set the basic background color and specify these attributes, so the contents of the element are readable anyway.

Background imagebackground-image

Specifies the background picture to display, using the url() set path.

• The default image repetition is repeated horizontally and vertically.

Repeat backgroundbackground-repeat

Specifies how the background image repeats, and the default value is repeat (repeats until the entire element's background is filled)

value	Description
No-repeat	Do not repeat
Repeat	Both vertical and horizontal repetition
Repeat-x	X axis direction (horizontal) Repeat
Repeat-y	Y-axis direction (vertical) repeat

Background positionbackground-position

Specifies the location of the background picture, where the origin is the upper-left corner (0,0).

• You can enter two values to represent the X-axis and Y-axis, or just one value.

• can input length value (px, etc.), relative value (REM, etc.), percent, keyword (,,, left center right top , bottom )

• If you enter only one value, it represents the value of the X-axis, and the Y-axis becomescenter

• Values can be mixed, such asbackground-position:9px top;

Additional properties

Background scrollingbackground-attachment

Specifies how the background scrolls when the content scrolls.

value	Description
Scroll	The default value. Scrolling, the background image moves as the page scrolls.
Fixed	Fixed, the background image does not move when the rest of the page scrolls.