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

Справочник классов по умолчанию

Класс	Свойства
bg-bottom	background-position: bottom;
bg-center	background-position: 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;

Применение

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

.bg-left-top

.bg-top

.bg-right-top

.bg-left

.bg-center

.bg-right

.bg-left-bottom

.bg-bottom

.bg-right-bottom

<div class="bg-no-repeat bg-left-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-top ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-center ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-left-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-bottom ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat bg-right-bottom ..." style="background-image: url(...);"></div>

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

Чтобы управлять положением фонового изображения элемента в определенной контрольной точке, добавьте префикс {screen}: к любой существующей утилите определения положения фона. Например, добавление класса md:bg-top к элементу приведет к применению утилиты bg-top при средних размерах экрана и выше.

<div class="bg-center md:bg-top ..." style="background-image: url(...)"></div>

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

Кастомизация

Позиции фона

По умолчанию Tailwind предоставляет девять утилит background-position. Вы изменяете, добавляете или удаляете их, редактируя раздел theme.backgroundPosition в вашей конфигурации Tailwind.

  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundPosition: {
        bottom: 'bottom',
+       'bottom-4': 'center bottom 1rem',
        center: 'center',
        left: 'left',
-       'left-bottom': 'left bottom',
-       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+       'top-4': 'center top 1rem',
      }
    }
  }

Варианты

По умолчанию, только responsive варианты создаются для утилит background position.

Вы можете контролировать, какие варианты создаются для утилит background position для изменения свойства backgroundPosition в разделе variants Вашего файла конфигурации tailwind.config.js.

Например, эта конфигурация также будет генерировать варианты hover и focus:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
+       backgroundPosition: ['hover', 'focus'],
      }
    }
  }

Отключение

Если Вы не планируете использовать в своем проекте утилиты для изменения background position, Вы можете полностью отключить их, установив для backgroundPosition свойство значение false в разделе corePlugins Вашего файла конфигурации:

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     backgroundPosition: false,
    }
  }