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

background-attachment
sm
md
lg
xl

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

Классы

Класс Значение
bg-fixed background-attachment: fixed;
bg-local background-attachment: local;
bg-scroll background-attachment: scroll;

Описание

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

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

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

bg-fixed

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

<div class="bg-fixed 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-local

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

<div class="bg-local 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-scroll

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

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

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

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