CSS Web Design tips: Background image positioning

Article Introduction: third, the background image positioning determinants: A. Set the size (width and height) of the background picture container B. First you define a background picture (Background-image) C. Second is whether the background picture is duplicated (background-repeat).

One, There are two ways to add a picture to a Web page

One is: Insert directly into HTML via tags
The other is: by adding CSS background attributes

Second, How to judge how to add a picture??

Ø Decorative Pictures in the webpage, add through the background picture

Ø user picture, add by Insert form

Ø button, with multiple states of effect picture, add through background picture

Third, background image Positioning determining factors:

A. Set the size (width and height) of the background picture container

B. First to define a background picture (Background-image)

C. Second, whether the background picture is duplicated (background-repeat)

Four, background image Positioning (background-position) principle

A. Grammar: background-position: Horizontal position Vertical position

B. Horizontal position/Vertical Position setting method:

1) value (px) positive negative values can be

2 percent (%) range: 0%-100%

3) Keywords: horizontal position: Left center (middle) right

Vertical position: Top (Upper) center (middle) Bottom (bottom)

Note: when setting only one value: represents the horizontal position, the vertical position is centered by default

C. principle Analysis:

Yesterday 13:20 uploaded Download Attachments(24.63 KB)
Yesterday 13:20 uploaded Download Attachments(41.38 KB)
Yesterday 13:20 uploaded Download Attachments(77.43 KB)

Note: the picture/container moves to the right when the picture positioning value is positive

Picture/container moves up to the left when the picture positioning value is negative

D. Location processing methods:

1. A background picture positioning (for the container larger than the picture)

Keywords positioning: Horizontal position (left: abbreviation l;center: abbreviation c;right: abbreviation R;)
Vertical position (top: abbreviation t;center: abbreviation c;bottom: abbreviation B;)

Yesterday 13:20 uploaded Download Attachments(33.39 KB)

2. Csssprites Picture Positioning