Background skills in common CSS

Css tutorial description
Background-image: url ("image url"); background image
Background: url ("image url"); background
Background-color: # color code; background color

Exp:

The code is as follows:	Copy code
Background-image: url(background image .jpg, gif, bmp ); Background-color: # FFFFFF; Background-color: transparent; <-- set the background to transparent

--------------------------------------------------------------------------------

Background-repeat

Css
Description
Repeat background image side by side
Repeat-x background image side by side in X direction
Repeat-y background image side by side in Y direction
No-repeat background images are not processed side by side

The code is as follows:	Copy code
Background-image: url ("yun_qi_img/xx.gif "); Background-repeat: no-repeat; Take the yun_qi_img/xx.gif image as the background. When the image size is insufficient, it will not be repeated.

Does background-attachment fix the image position?

Css
Description
When scroll pulls the scroll, the background image will move along (default)
When fixed pulls the scroll, the background image will not move

Exp:

The code is as follows:	Copy code
Background-image: url ("yun_qi_img/xx.gif "); Background-repeat: no-repeat; Background-attachment: fixed; The yun_qi_img/xx.gif background image is not repeated and does not move with the scroll

--------------------------------------------------------------------------------

Locate the background-position: x y in length
Use percentage to locate background-position: x % y %

Css
Description
Shift x % to the right
Y % move down
Backgroud-position: 0% 0%; top left
Backgroud-position: 0% 50%; middle left
Backgroud-position: 50% 0%; upper center
Backgroud-position: 50% 50%; median
Backgroud-position: 100% 0%; top right
Backgroud-position: 0% 100%; bottom left
Backgroud-position: 100% 50%; middle right
Backgroud-position: 50% 100%; bottom center
Backgroud-position: 100% 100%; bottom right

Locate with keywords
Keyword description
Top (y = 0)
Center (x = 50, y = 50)
Bottom (y = 100)
Left (x = 0)

Exp:
Background-position: center;
The image is in the center of the specified background X = 50% Y = 50%
Background-position: 200px 30px