sergei2210
@sergei2210
Кратко о себе

Background-position как вычисляется положение?

В документации написано верхний левый угол, но факту все не так просто.
Объясните простыми словами как она считает.
  • Вопрос задан
  • 100 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
В документации написано верхний левый угол, но факту все не так просто.

По умолчанию левый верхний угол. Всё просто.

Получается что он зафиксировал картинку и больше не двигает, но если картинка больше элемента не понятно как он ее рассчитывает

Левый верхний угол картинки попадает в левый верхний угол элемента. Всё, что не влезло обрезается.

Если нужно, чтобы картинка вся поместилась, то используется background-size с нужным значением.

По поводу расчета положения:
Буду говорить по горизонтальный сдвиг, с вертикальным тоже самое, а писать меньше.
0% или left - левый край картинки у левого края блока.
100% или right - правый край картинки у правого края блока.
50% или center - центр картинки по центру блока.

Из всего этого получается, что 90% не даст нам промежутка между картинкой и краем блока в 100px при ширине блока 1000px. Т.е. сдвиг будет рассчитываться от расстояния, которое пройдет картинка от самого правого положения до центрального. Ну и пополам, потому что до половины.

Посмотреть (картинка 100px и полоски нарисованы через 100px для наглядности):
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы