Background-position is calculated as position?

The documentation says the upper left corner, but the fact is not so simple.
Explain in simple words how she felt.
April 19th 20 at 12:38
2 answers
April 19th 20 at 12:40
Solution
The documentation says the upper left corner, but the fact is not so simple.

By default, the upper left corner. It's simple.

It turns out that he fixed the picture and no longer moves, but if the larger picture of the item it is not clear how he expects

The upper left corner of the picture falls into the upper left corner of the element. Everything that does not fit is clipped.

If you want the picture all fit, then use background-size with the desired value.

Regarding the calculation of the provisions:
Will speak in the horizontal position, vertical the same, and write less.
0% or left - left edge of the picture near the left edge of the block.
100% or right - right edge of the picture at the right edge of the block.
50% or center center the picture in the center of the block.

From all this it turns out that 90% does not give us the interval between the picture and the edge of the block to 100px with the width of 1000px unit. I.e., the shift will be calculated from the distance that will be the picture from the right position to Central. Well, in half because half.

To see (the picture is 100px and stripes painted using 100px for clarity):
April 19th 20 at 12:42
Default is left top
But usually change this behavior you write background-size: cover/contain/100% 100% and background-position:
In my case, center center : https://codepen.io/topicstarter/pen/PoPzZZG

Find more questions by tags CSS