Details about the background attribute in CSS

CSS background property background

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

Exp:
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

Exp:
Background-image: url ("http://www.bkjia.com/uploadfile/2013/0105/20130105045921621.gif ");
Background-repeat: no-repeat;
Take Effect

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

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:
Background-image: url ("http://www.bkjia.com/uploadfile/2013/0105/20130105045921621.gif ");
Background-repeat: no-repeat;
Background-attachment: fixed;
Take Effect
--------------------------------------------------------------------------------
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