Повтор фона

​

Основы использования

​

Повторение

Используйте bg-repeat для повторения фонового изображения как по вертикали, так и по горизонтали.

<div class="bg-repeat ..." style="background-image: url(...)"></div>

​

Без повторения

Используйте bg-no-repeat, если вы не хотите повторять фоновое изображение.

<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

​

Повторение по горизонтали

Используйте bg-repeat-x, чтобы повторять фоновое изображение только по горизонтали.

<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>

​

Повторение по вертикали

Используйте bg-repeat-y, чтобы повторять фоновое изображение только по вертикали.

<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>

​

Применяя условно

​

Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:bg-repeat-x, чтобы применять утилиту bg-repeat-x только при hover.

<div class="bg-repeat hover:bg-repeat-x">
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​

Контрольные точки и медиа-запросы

Вы также можете использовать модификаторы вариантов для таргетинга на медиа-запросы, такие как реагирующие контрольные точки, темный режим, предпочтения с уменьшенным движением и многое другое. Например, используйте md:bg-repeat-x, чтобы применить утилиту bg-repeat-x только на экранах среднего размера и выше.

<div class="bg-repeat md:bg-repeat-x">
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.