Фоны
Утилиты для управления размером фонового изображения элемента.
| Class | Styles |
|---|---|
bg-auto | background-size: auto; |
bg-cover | background-size: cover; |
bg-contain | background-size: contain; |
bg-size-(<custom-property>) | background-size: var(<custom-property>); |
bg-size-[<value>] | background-size: <value>; |
Используйте утилиту bg-cover для масштабирования фонового изображения до заполнения фонового слоя, при необходимости обрезая изображение:
<div class="bg-[url(/img/mountains.jpg)] bg-cover bg-center"></div>Используйте утилиту bg-contain для масштабирования фонового изображения до внешних краёв без обрезки или растягивания:
<div class="bg-[url(/img/mountains.jpg)] bg-contain bg-center"></div>Используйте утилиту bg-auto для отображения фонового изображения в его размере по умолчанию:
<div class="bg-[url(/img/mountains.jpg)] bg-auto bg-center bg-no-repeat"></div>Используйте синтаксис bg-size-[<value>] , чтобы задать background size на основе полностью пользовательского значения:
<div class="bg-size-[auto_100px] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: bg-size-(<custom-property>)
<div class="bg-size-(--my-image-size) ..."> <!-- ... --></div>Это просто сокращение, bg-size-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a background-size утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="bg-auto md:bg-contain ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.