Повтор фона

background-repeat
sm
md
lg
xl

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

Классы

Класс Значение
bg-repeat background-repeat: repeat;
bg-repeat-none background-repeat: no-repeat;
bg-repeat-x background-repeat: repeat-x;
bg-repeat-y background-repeat: repeat-y;
bg-repeat-round background-repeat: round;
bg-repeat-space background-repeat: space;

Описание

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

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • bg-repeat - для повторения фона;
    • bg-repeat-none - для размещения фона без повторения;
    • bg-repeat-x - для размещения фона с повторением по оси X;
    • bg-repeat-y - для размещения фона с повторением по оси Y;
    • bg-repeat-round - для повторения фона таким образом чтобы покрыть всю область целыми изображениями фона с возможным искажением пропорций изображения фона;
    • bg-repeat-space - для повторения фона таким образом чтобы максимально закрыть целыми изображениями фона без искажения пропорций но с остаточными промежутками между ними;

bg-repeat

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

<div class="bg-repeat 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-repeat-none

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

<div class="bg-repeat-none 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-repeat-x

Используйте модификатор bg-repeat-x для размещения фона с повторением по оси X.

<div class="bg-repeat-x 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-repeat-y

Используйте модификатор bg-repeat-y для размещения фона с повторением по оси Y.

<div class="bg-repeat-y 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-repeat-round

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

<div class="bg-repeat-round 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-repeat-space

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

<div class="bg-repeat-space 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-center для повтора фонового изображения для экранов размером Medium и больше.

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

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

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