background-attachment: связь фона с прокруткой
background-attachment определяет, связан ли фон с элементом, его прокручиваемым содержимым или областью просмотра.
Назначение
background-attachment определяет, связан ли фон с элементом, его прокручиваемым содержимым или областью просмотра.
Как это работает
scroll привязывает фон к коробке элемента, local — к его содержимому, fixed — обычно к области просмотра. Мобильные браузеры и специальные контексты могут ограничивать эффект fixed.
Пример
<style>
.scrollbox{height:120px;overflow:auto;background-image:repeating-linear-gradient(#eaf4ee 0 24px,#cfe0d5 24px 48px);background-attachment:local;padding:12px}.long{height:300px}
</style>
<div class="scrollbox" tabindex="0" aria-label="Прокручиваемый пример"><div class="long">Прокрутите полосатый фон вместе с содержимым.</div></div>Что должно получиться
При local полосы перемещаются вместе с внутренним содержимым. Пример не требует внешнего файла и позволяет отдельно наблюдать поведение области прокрутки.
Граница применения и частая ошибка
Не стройте обязательную часть интерфейса на эффекте неподвижного фона без проверки устройств. Крупные изображения и прокрутка также могут увеличить стоимость перерисовки.
Самостоятельная проверка
Сравните local и scroll внутри небольшого прокручиваемого блока. Затем проверьте fixed в отдельной странице на целевых устройствах, а не только в настольном предпросмотре.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.