background-repeat

Примеры

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

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

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>

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

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

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>

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

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

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>

Предотвращение обрезки

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

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>

Предотвращение обрезки и промежутков

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

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>

Отключение повторения

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

<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>

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

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

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

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