Некоторые подводные камни, которые могут возникнуть при использовании background-position:
- Сложности с пониманием процентных значений. 3 Их использование даёт большой контроль над позиционированием изображения, но может быть сложно для понимания. 3 Например, при установке background-position: 50% 50% это означает, что отметка 50% изображения совпадает с отметкой 50% контейнера. 3
- Неправильное поведение при разных размерах контейнера. 2 Например, при блоках меньшего размера картинка вместо того, чтобы идти вниз, может уходить вверх. 2
- Ошибки в Gecko. 4 В этом движке есть ошибка, из-за которой background-position не может быть переведён между двумя значениями, содержащими разные числа. 4
Чтобы избежать проблем, рекомендуется тщательно подбирать значения, сохраняя соотношение сторон фонового изображения. 3