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

Свойство background-position

Свойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y.

x задаёт расположение по горизонтали, а y по вертикали.

В качестве значения x можно использовать ключевые слова left, center, right, значения в процентах и в пикселях.

В качестве значения y можно использовать ключевые слова top, center, bottom, значения в процентах и в пикселях.

Примеры использования свойства:

background-position: 50% 50%;
background-position: right bottom;
background-position: 50px 100px;
background-position: 0 100%;
background-position: left bottom;

Так сработают примеры:

  1. картинка будет по центру;
  2. правый нижний угол;
  3. отступ 50px от левого края и 100px от верхнего;
  4. левый нижний угол;
  5. левый нижний угол.

Хотите досконально разбираться в разметке, знать о доступности, строить сетки на флексбоксах? Записывайтесь на профессиональный курс по вёрстке первого уровня, проходящий c 27 мая по 29 июля 2024. Только 3 дня цена 21 900 ₽22 900 ₽

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

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

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

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

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

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