The use of background-position in CSS

Equivalence notation of background-position assignment

1, top left and left top equivalent to 0% 0%.

2, top, top center, center top is equivalent to 50% 0%.

3, right top, top right is equivalent to 100% 0%.

4, left, left center, center left is equivalent to 0% 50%.

5, center, center Center is equivalent to 50% 50%.

6, right, right center, center right is equivalent to 100% 50%.

7. Bottom left and left bottom equivalent to 0% 100%.

8, bottom, bottom center, center bottom equivalent to 50% 100%.

9, bottom right, right bottom equivalent to 100% 100%.

Second, the background image positioning we want to clear the points

1, two values the front one is the horizontal positioning, we call the x-axis orientation. The latter value is the longitudinal orientation, which we call the y-axis orientation.

If there is only one value, the default is the x-axis direction,

At this point the y-axis is the default alignment, which is center.

2, the original point of the axis is the corresponding container left vertex.

3, the y-axis of the coordinates of the arrow face down, that is, the lower right (inside the container) x Y value is positive.

4, x y values indicate the value of the left vertex of the background image relative to the coordinate origin (that is, the left vertex of the container).

5, the value of x Y can be expressed as a percentage or px.

6, x y can also be used "left, right, top, bottom, center" the five alignment to express,

Note: When represented by left, right, top, bottom, center, the alignment rules are applied instead of the coordinate rules.

X is left to indicate the right side of the picture and the left side of the container, which means the

When Y is top, the top of the picture is aligned with the top of the container,

When bottom indicates that the bottom of the picture is aligned with the bottom of the container, x y equals center is the center alignment.

7. When x y is expressed as a percentage or PX, its value can be negative. We can easily understand the meaning of negative numbers by applying coordinate rules,

When x is negative, the left vertex of the picture is left on the left vertex of the container.

Y is negative to indicate that the left vertex of the picture is above the left point of the container. That is, left and up beyond the scope of the container.

Reference: Use of Background-position http://www.studyofnet.com/news/960.html

The use of background-position in CSS