Краткая справка

bg-repeatbackground-repeat: repeat;
bg-no-repeatbackground-repeat: no-repeat;
bg-repeat-xbackground-repeat: repeat-x;
bg-repeat-ybackground-repeat: repeat-y;
bg-repeat-roundbackground-repeat: round;
bg-repeat-spacebackground-repeat: space;

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


Используйте 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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:bg-repeat-x to only apply the bg-repeat-x utility on hover.

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

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

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

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:bg-repeat-x to apply the bg-repeat-x utility at only medium screen sizes and above.

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

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.