background-position

Примеры

Базовый пример

Используйте такие утилиты, как bg-center, bg-right и bg-top-left, для управления положением фонового изображения элемента:

Наведите курсор на эти примеры, чтобы увидеть полное изображение

bg-top-left

bg-top

bg-top-right

bg-left

bg-center

bg-right

bg-bottom-left

bg-bottom

bg-bottom-right

<div class="bg-[url(/img/mountains.jpg)] bg-top-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-top"></div><div class="bg-[url(/img/mountains.jpg)] bg-top-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-center"></div><div class="bg-[url(/img/mountains.jpg)] bg-right"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom-left"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom"></div><div class="bg-[url(/img/mountains.jpg)] bg-bottom-right"></div>

Использование пользовательского значения

Используйте синтаксис bg-position-[<value>] , чтобы задать background position на основе полностью пользовательского значения:

<div class="bg-position-[center_top_1rem] ...">  <!-- ... --></div>

Для переменных CSS вы также можете использовать синтаксис: bg-position-(<custom-property>)

<div class="bg-position-(--my-bg-position) ...">  <!-- ... --></div>

Это просто сокращение, bg-position-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс a background-position утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="bg-center md:bg-top ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.