Position with CSS background images

I,There are two ways to add images to a webpage:

One is: insert directly to HTML using the label
Another method is to add a CSS background attribute.

II,How can I determine how to add images ??

Add a decorative image on the webpage through the background image

User images are inserted into the image

Ø button, with multiple status slices, added through the background image

III,Determining Factors of Background Image Positioning:

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

B. first define the background image)

C. Check whether the background image is repeated (background-repeat)

IV,Background-position principle

A.Syntax: Background-position: horizontal vertical position

B.Horizontal position/vertical position setting method:

1) values (PX) can both be positive and negative.

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

3) KEYWORDS: horizontal position: Left (left) Center (middle) Right (right)

Vertical Position: Top (top) Center (middle) Bottom (bottom)

Note:When only one value is set: the vertical position is centered by default.

C.Principle Analysis:

 

 

Note:When the Image Positioning value is positive, the image/container moves down to the right

When the Image Positioning value is negative, the image/container moves up to the left

D.Solution:

1. positioning of a background image (for containers larger than images)

Key words positioning: horizontal position (left: L; center: C; Right: R ;)
Vertical Position (top: T; center: C; bottom: B ;)

 

2. csssprites Image Positioning