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

background-position
sm
md
lg
xl

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

Классы

Класс Значение
bg-bottom background-position: bottom;
bg-center background-position: text-center;
bg-left background-position: left;
bg-left-bottom background-position: left bottom;
bg-left-top background-position: left top;
bg-right background-position: right;
bg-right-bottom background-position: right bottom;
bg-right-top background-position: right top;
bg-top background-position: top;

Описание

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

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

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

bg-bottom

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

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

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

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

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

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

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

<div class="bg-left-bottom 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-left-top

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

<div class="bg-left-top 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-right

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

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

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

<div class="bg-right-bottom 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-right-top

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

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

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

<div class="bg-top 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-center"></div>

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

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