CSS tutorial: Background attribute Application

BACKGROUND 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://webdesign.chinaitlab.com/UploadFiles_8014/200903/20090323115920230.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://webdesign.chinaitlab.com/UploadFiles_8014/200903/20090323115920230.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