Background-position and relative values

Question

css

There is a div on the HTML page that has a large image set as the background. For div'a (hereinafter I will call it a container ) the dimensions are set: height 100%, width 100%, and the overflow: hidden property is set (i.e. everything that does not fit in the container is hidden).

The background image has a resolution of 1280x1024px, the container gets a size of ~1024px (because it is set to 100% of the size of the browser window, which in turn is 1024px).

When the page loads, I start a timer for 5 seconds, after which I want to do the following: the container should smoothly go off the screen to the right. I implement the movement of the container (in fact, only its background) according to the following algorithm: every 50 milliseconds I change the background-position property , subtracting one percent from its first value ( left ), until it becomes -100% ( more precisely, in the "full" form : -100% 0% ).

Logically, I assume that such a change will cause the image to move completely to the right, disappearing outside the container.

How does it really come out?

In reality, the image only reaches about 1/3 of the width of the container (remember that the image is 1280px wide and the container is 100% = 1024px). Strange, right?
If we hardcode the width of the container as the image (1280px), then the background-position does not affect the background position at all (at least -100%, at least -50%, at least -300%).
If we rigidly set the size of the container to be less than the width of the image, then the direction of movement changes in the opposite direction.

Where is the logic here?

background-position: -100% 0%

- here -100% is 100% of what? container size? Background image size? Browser window size? And why is -100% typically equal to about 30% of the container's width, and 20% of the background image's width?

See an example here

Answer 1

Here is the whole article: oooportal.ru/?cat=article&id=322
I will give an answer to your question: I.e. in your case, at -100%, the points -1280 and -1024 are equal to each other. And it just turns out an offset of a third (rather even a quarter).
Правило предусматривает, что точка, находящаяся вне границ изображения, определяемая значением –10% –10%, должна быть выровнена с аналогичной точкой абзаца.