How to use background-position in CSS and how to locate negative values

First, share some of your knowledge with you.

1. Origin location, that is, the upper left corner of the block element
2. The background-position is the offset between the image and the coordinate origin.
3. The origin is not dynamic. The X coordinate of the image is shifted to the right in the upper left corner of the regular image.
4. Y coordinates are the top-left translation of the regular Image. If it is negative, it is the top-left translation.
5. There is a formula for calculating the percentage: x axis (container width-image width) * percent containing symbols
6. Y axis (container height-image height) * Percent of symbols

Let's look at the CSS background-position syntax:

Background-position: length | length
Background-position: position | position
Valid value:

Length :? Percent | length value composed of floating point numbers and unit identifiers. See length unit
Position :? Top | center | bottom | left | center | right

Note:
Sets or retrieves the background image position of an object. The background-image attribute must be specified first.
This attribute positioning is not affected by the object's patch attribute (padding) settings.
The default value is 0% 0%. In this case, the background image is located in the upper left corner of the content area of the object that does not include the patch.
If only one value is specified, the value is used for abscissa. The default ordinate value is 50%. If two values are specified, the second value is used for ordinate.
If the value is set to right center, right will overwrite the center value as the abscissa value, so the background image will be located on the right.
The corresponding script feature is backgroundPosition.

Note:The image size used in this article is 300px * 120px. In order to clearly express which part of the image is hidden, the image size is evenly divided into 9 equal parts. At the same time, the container area of the background image draws a green border to clearly display the container range.
1. background-position: 0 0;
The upper left corner of the background image is aligned with the upper left corner of the container element. This setting is consistent with that of background-position: left top; or background-position: 0% 0%. For example:

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll 0 0; Border: 5px solid green;     }

The effect is shown in Figure 1:

 

 

Figure 1

 

2. This attribute is not affected by the object's patch attribute (padding) settings.

For example, if we add a padding value to the container element, the upper left corner of the background image is still aligned with the upper left corner of the container element. In this case, only the height and width of the container elements are affected.

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll 0 0; Border: 5px solid green; Padding: 50px;     }

The effect is shown in Figure 2:

 

 

Figure 2

 

3. background-position:-70px-40px;

The image uses the upper left corner of the container as the reference offset of 70px to the left and 40px to the top, for example:

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll-70px-40px; Border: 5px solid green;     }

The effect is shown in Figure 3:

 

 

Figure 3

 

4. background-position: 70px 40px;

The image uses the upper-left corner of the container as the reference to offset 70px to the right and 40px to the down, for example:

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll 70px 40px; Border: 5px solid green;     }

The effect is shown in Figure 4:

 

 

Figure 4

 

5. background-position: 50% 50%;

Center the image horizontally and vertically. This is equivalent to the background-position: center.

Equivalent to x: {container (container) width-background image width} * x percentage, the excess part is hidden.
Equivalent to y: {container (container) height-background image height} * y percentage. The excess part is hidden.

For example:

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll 50% 50%; Border: 5px solid green;     }

X = (300-210) * 50% = 45px;

Y = (150-120) * 50% = 15px;

The effect is shown in Figure 5:

 

 

Figure 5

 

Because the excess parts are extended to both ends, we can first create an image with a width that is sufficiently wide and set the horizontal value to 50%. This can be used to adapt to different browsers, make the image horizontally filled with browser windows and centered. Replace margin: 50 auto.

6. background-position:-50%-50%;

Equivalent to x:-{container (container) width-background image width} * x percentage. The excess part is hidden.
Equivalent to y:-{container (container) height-background image height} * y percentage. The excess part is hidden.

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll-50%-50%; Border: 5px solid green;     }

The effect is shown in Figure 6:

 

 

Figure 6

 

7. background-position: 100% 100%;

The image is in the lower-right corner of the container element, which is equivalent to background-position: right bottom.

Example:

The code is as follows:	Copy code
. Container { Width: 300px; Height: 150px; Background: transparent url(bg.jpg) no-repeat scroll 100% 100%; Border: 5px solid green;     }

The effect is shown in Figure 7:

 

 

Now let's take a look at the position of the background-position background negative value.

The HTML page contains a gray background DIV block of 162*162 and three background images with different positions,
The effect shown in the browser:

As shown in the preceding figure, when the value is background-position: 0 0, the upper left corner of the image overlaps with the upper left corner of the DIV. When we locate the value in background-position:-50px-50px; when it is found that the image is moved to the top left, it is centered on the upper left corner of the DIV. The image is moved to the left by 50PX and to the right by 50PX. the third example is the effect of moving the graph with the upper value. this should be easy to understand.
In summary, all of the above are based on the 0, 0 points of the DIV as the reference point. If the DIV area is interpreted as a coordinate axis, the image is negative to the left, right, and bottom is a positive value.

It seems that you can't remember so much, so I will tell you what you should remember!

In practice, most of the situations are that we know that the position of an image is the yellow point in the figure above. We should calculate its length on the figure to get that the two values are both 150PX, then we need to write background-position:-150px-150px to define the position of the graph, the volume method on the graph is shown in the figure below (this figure is equivalent to an effect chart or a design drawing). Remember this figure and you will surely be able to grasp the negative value of the background image.

Instance code

The code is as follows:

Copy code

<Style type = "text/css"> <! -- . Style1,. style2,. style3 { Float: left; Width: 162px; Height: 162px; Background: # CCCCCC url (/r2007523163838.gif) 0 0 no-repeat; Border: 1px dotted# 999999; Color: red; Margin-right: 10px; } . Style2 { Background-position:-50px-50px; } . Style3 { Background-position: 100px 100px; } . Blue { Color: blue; } --> </Style> <Div class = "style1"> X: 0, <span class = "blue"> y: 0 </span> </Div> <Div class = "style2"> X:-50px, <span class = "blue"> y:-50px </span> </Div> <Div class = "style3"> X: 100px, <span class = "blue"> y: 100px </span> </Div>