• Теория
  • Теория

Позиция фона от разных сторон

Интересная возможность background-position, о которой мы раньше не рассказывали — расположение фона можно задавать относительно любого угла блока, а не только от левого верхнего.

Чтобы указать от какой стороны отсчитывать расположение фона, нужно перед значением координат задать ключевые слова: top, right, bottom или left. Например:

/* по умолчанию координаты задаются для левого верхнего угла */
background-position: 10px 50px; /* слева 10px, сверху 50px */

background-position: right 30px bottom 60px; /* справа 30px, снизу 60px */
background-position: left 50px bottom 10px; /* слева 50px, снизу 10px */
background-position: right 40px top 30px; /* справа 40px, сверху 30px */

Поддержка данных значений свойства background-position в современных браузерах практически полная.

Давайте добавим мсьё Кексу модные монокль и усы, а расположим эту картинку от нижнего правого угла.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует завтра. Всего от 6080 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Рамки и фоны. Погружение» тренажёра «Продвинутая работа с фонами и рамками» можно после регистрации и оформления подписки.