Some syntax of background in CSS css

css description
background-image:url("URL of the image"); background image
background: url("URL of the image"); background
background-color:#color code; background color

Exp:
background-image:url(background pattern.jpg,gif,bmp);
background-color:#FFFFFF;
background-color : transparent; <--Set the background to a transparent color

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

background-repeat changes the repeating side-by-side setting of background images

css
illustrate
repeat background images side by side
repeat-x background images are arranged side by side in the X direction
repeat-y background images are arranged side by side in the Y direction
no-repeat background images are not processed side by side

Exp:
background-image:url("/u/info_img/2009-06/09/xx.gif");
background-repeat:no-repeat;
Use this picture as the background. When the picture size is not enough, do not repeat it side by side.

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

Whether background-attachment fixes the image position

css
illustrate
scroll When the scroll is pulled, the background image will move accordingly (default value)
fixed The background image will not move when the scroll is pulled.

Exp:
background-image:url("/u/info_img/2009-06/09/xx.gif");
background-repeat:no-repeat;
background-attachment:fixed;
The background image in /u/info_img/2009-06/09/xx.gif is not repeated and juxtaposed, and does not move with the scroll.

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

Position background-position by length: x y
Use percentage positioning background-position: x% y%

css
illustrate
x% move right
y% move down
backgroud-position: 0% 0%; top left
backgroud-position: 0% 50%; left center
backgroud-position: 50% 0%; above center
backgroud-position: 50% 50%; middle
backgroud-position:100% 0%; upper right
backgroud-position: 0% 100%; bottom left
backgroud-position: 100% 50%; middle right
backgroud-position: 50% 100%; middle and lower
backgroud-position: 100% 100%; lower right

Target with keywords
Keyword Description
top ( y = 0 )
center ( x = 50, y = 50 )
bottom ( y = 100 )
left left ( x= 0 )

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