Background-position how is the position calculated?

Question

css

The documentation says the upper left corner, but the fact is not so simple.
Explain in simple terms what she thinks.

Answer 1

The documentation says the upper left corner, but the fact is not so simple.

The default is the top left corner. Everything is simple.

It turns out that he fixed the picture and does not move it anymore, but if the picture is larger than the element, it is not clear how he calculates it

The upper left corner of the image falls into the upper left corner of the element. Anything that doesn't fit is cut off.
If you need the whole picture to fit, then it is used background-sizewith the desired value.
Regarding the calculation of the position :
I will talk about the horizontal shift, the same with the vertical shift, but write less.
0% or left - the left edge of the image at the left edge of the block.
100% or right - the right edge of the image at the right edge of the block.
50% or center - the center of the image in the center of the block.
From all this, it turns out that 90% will not give us a gap between the image and the edge of the box of 100px with a box width of 1000px. Those. the shift will be calculated from the distance that the image will travel from the rightmost position to the center. Well, in half, because up to half.
View (picture 100px and stripes drawn through 100px for clarity):