Как задаётся местоположение в backgrond-positiion?

Question

[Rooly]

Приветствую. Не понимаю как задаётся backgroud-position.
Если у нас например есть такой код "background-position: 10% 12%", то эти 10% и 12% это местопложение верхнего и левого угла относительно того DOM-элемента к которому мы применяем данное свойство?

Answer 1

[Алексей Струков]

Все немного сложнее.
10 процентов по оси X = 10% ширины контейнера - 10% ширины картинки.
Тоже самое верно и для оси Y
Так сделано специально, чтобы, например, при позиционировании background-position: 100% 100%; картинка не уезжала за пределы экрана, а прижималась к правому нижнему краю.
Алгорит рассчета такой: сначала сдвинуть картинку вперед на 100 процентов от ширины контейнера, потом вернуть ее назад на 100 процентов от ширины картинки.