Есть на HTML-странице
div, у которого фоном задана большая картинка. Для div'a (далее буду называть его
контейнером) заданы размеры: height 100%, width 100%, а также установлено свойство
overflow: hidden (т.е. всё, что не помещается в контейнер, скрывается).
Фоновая картинка имеет разрешение 1280х1024px, контейнер получает размер ~1024px (поскольку у него задано 100% от размера браузерного окна, которое, в свою очередь, имеет размер 1024px).
При загрузке страницы я запускаю таймер на 5 секунд, после окончания которого, хочу сделать следующее: контейнер должен плавно уехать вправо за экран. Движение контейнера (в действительности только его фона) реализую по следующему алгоритму: каждые 50 миллисекунд изменяю свойство
background-position, отнимая у первого его значения (
left) по одному проценту, пока оно не станет равным -100% (
точнее в «полном» виде: -100% 0%).
Логически рассуждая, я предполагаю, что такое изменение приведёт к тому, что картинка полностью уедет вправо, исчезнув за границами контейнера.
Как оно выходит на самом деле?
В действительности картинка доезжает только до примерно 1/3 ширины контейнера (напомню, что картинка имеет ширину 1280px, а контейнер 100% = 1024px). Странно, да?
Если же мы жёстко зададим контейнеру ширину как у картинки (1280px), то
background-position вообще никак не влияет на расположение фона (хоть -100%, хоть -50%, хоть -300%).
Если же мы жёстко зададим размер контейнеру
меньше ширины картинки, то направление движения меняется в противоположную сторону.
Где тут логика?
background-position: -100% 0%
— здесь -100% — это 100% от чего? Размера контейнера? Размера фонового изображения? Размера окна браузера? И почему -100%, как правило равно примерно 30% ширины контейнера, и 20% ширины фонового изображения?
Пример
смотрим тут 
