Закрепление фона

Фиксированный

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

Локальный

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

Прокрутка

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

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

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

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

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

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

Варианты

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

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

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

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

Отключение

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

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