Вложение фона

background-origin
sm
md
lg
xl

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

Классы

Класс Значение
bg-origin-border background-origin: border-box;
bg-origin-padding background-origin: padding-box;
bg-origin-content background-origin: content-box;

Описание

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

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

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

bg-origin-border

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

<div class="bg-origin-border 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-origin-padding

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

<div class="bg-origin-padding 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-origin-content

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

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

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

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

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