.
Относительное позиционирование фона.
Проценты в css почти в каждом месте, где используются, считаются относительно разных величин. Например,
неочевидным образом они рассчитываются в свойстве background-position.
Формальные правила такие:
(container_width - image_width) * (position_x%) = (x_offset_value)
(container_height - image_height) * (position_y%) = (y_offset_value)
Считаем размер свободного от фона пространства блока, умножаем его на указанный по этой оси процент и получаем смещение фона от края блока по заданной оси.
То есть, на самом деле, проценты этом случае помогают распределять не занятое фоном пространство. Посмотрим на примере.
Указываем размер фона в половину размера блока. Указываем положение фона и считаем его по приведенным выше формулам.
Побочный интересный эффект этого факта, что если фон занимает всю площадь блока, то указание процентов в
background-position не будет иметь вообще никакого действия.
div {
background-size: 100% 100%;
background-position: 300000000%;
}