Повтор фона

​

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

​

Повторение

Используйте 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">
  <!-- ... -->
</div>

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">
  <!-- ... -->
</div>

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