Размер фона

background-size
sm
md
lg
xl

В SIMAI Framework с помощью модифкаторов можно управлять повтором фона.

Классы

Класс Значение
bg-auto background-size: auto;
bg-cover background-size: cover;
bg-contain background-size: contain;

Описание

Адаптивный модификатор. Задает размер фона в зависимости от размера области просмотра.

Использование модификатора: {контрольная точка}:{модификатор}

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • bg-auto - для отображения изображения фона в исходном размере;
    • bg-cover - для заполнения изображением фона всей области элемента;
    • bg-contain - для вписывания изображением фона в область элемента;

bg-auto

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

<div class="bg-auto w-full h-e8 bg-cover bg-top overflow-y-scroll" style="background-image:url('../../../image/picture.svg');">
    <div class="h-f8"></div>
</div>

bg-cover

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

<div class="bg-cover w-full h-e8 bg-cover bg-top overflow-y-scroll" style="background-image:url('../../../image/picture.svg');">
    <div class="h-f8"></div>
</div>

bg-contain

Используйте модификатор bg-contain для вписывания изображением фона в область элемента.

<div class="bg-contain w-full h-e8 bg-cover bg-top overflow-y-scroll" style="background-image:url('../../../image/picture.svg');">
    <div class="h-f8"></div>
</div>

Адаптивность

Для управления размером фонового изображения, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к модификатору.

Например, используйте модификатор md:bg-cover для покрытия фоновым изображением области для экранов размером Medium и больше.

<div class="md:bg-cover"></div>

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

Изменить статью