1. Фоны
  2. background-attachment

Фоны

background-attachment

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

ClassStyles
bg-fixed
background-attachment: fixed;
bg-local
background-attachment: local;
bg-scroll
background-attachment: scroll;

Примеры

Фиксация фонового изображения

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

Прокрутите содержимое, чтобы увидеть фиксированное фоновое изображение

Моя поездка на вершину
16 ноября 2021 · 4 мин чтения

Может быть, мы можем жить без библиотек, люди как ты и я. Может быть. Конечно, мы слишком стары, чтобы изменить мир, но как насчет того ребенка, который сидит, открывает книгу, прямо сейчас, в филиале местной библиотеки и находит рисунки пи-пи и ви-ви в "Коте в шляпе" и "Пяти китайских братьях"? Разве ОН не заслуживает лучшего?

Смотри. Если ты думаешь, что это о просроченных штрафах и пропавших книгах, тебе лучше подумать еще раз. Это о праве того ребенка читать книгу, не искажая свой разум! Или: может быть, это тебя возбуждает, Сайнфелд; может быть, так ты получаешь свои кайфы. Ты и твои приятели для веселья.

<div class="bg-[url(/img/mountains.jpg)] bg-fixed ...">  <!-- ... --></div>

Прокрутка вместе с контейнером

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

Прокрутите содержимое, чтобы увидеть, как фоновое изображение прокручивается вместе с контейнером

Потому что почта никогда не останавливается. Она просто продолжает приходить и приходить и приходить, никогда нет передышки. Это безжалостно. Каждый день она накапливается все больше и больше и больше. И ты должен ее разобрать, но чем больше ты ее разбираешь, тем больше она продолжает приходить. И потом ломается сканер штрих-кодов, и это день Publisher's Clearing House.

— Ньюман
<div class="bg-[url(/img/mountains.jpg)] bg-local ...">  <!-- ... --></div>

Прокрутка вместе с областью просмотра

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

Прокрутите содержимое, чтобы увидеть фоновое изображение, зафиксированное в контейнере

Потому что почта никогда не останавливается. Она просто продолжает приходить и приходить и приходить, никогда нет передышки. Это безжалостно. Каждый день она накапливается все больше и больше и больше. И ты должен ее разобрать, но чем больше ты ее разбираешь, тем больше она продолжает приходить. И потом ломается сканер штрих-кодов, и это день Publisher's Clearing House.

— Ньюман
<div class="bg-[url(/img/mountains.jpg)] bg-scroll ...">  <!-- ... --></div>

Адаптивный дизайн

Префикс a background-attachment утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

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

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков