Background background-position negative positioning in CSS deep understanding

Here's a background map I want to use:

The code is as follows:

The HTML page is a 162*162 gray background div block and adds three different locations to the background picture,

The effect you see in the browser:

As you can see from the image above: when background-position:0 0. When the top left corner of the picture is coincident with the upper left corner of the Div, when we locate the picture left and up, it is centered on the upper left corner of the Div, and the figure is moved 50PX to the left of the background-position:-50px-50px. The 50PX is also moved up. The third example uses positive values, which can be interpreted as the effect of moving the graph to the right and down. This should be well understood.

To sum up is the above is to Div 0, 0 points for the reference point picture movement, if the Div area interpreted as an axis chart, left, all negative, right, the next positive.

It seems that you can not remember so much, then I will tell you, you should remember what it!

In practice, most of the situation is to know the position of a figure as the yellow point above, we should be measured in the effect of its length of two values are 150PX, then we define the position of the map will be written background-position:-150px-150px; The volume method on the diagram looks at the image below (this is the same as the one you use for the effect or design), remember this diagram and believe that you will be able to master the method of negative background image.