Background-attachment: фиксация фона

По умолчанию, когда вы скроллите веб-страницу с фоном, фон прокручивается вместе с другими элементами. Иногда это уместно, а иногда хочется, чтобы изображение, заданное через background-image, всегда оставалось на виду. Для управления этим состоянием существует свойство background-attachment.

Значения background-attachment

Свойство может принимать три значения для настройки поведения фона:

• scroll (значение по умолчанию) — фоновое изображение перемещается вместе с другими элементами при скролле веб-страницы.
• fixed — значение фиксирует фоновое изображение, делая его нечувствительным к скроллу. При прокручивании страницы фон на заднем плане останется неподвижным.
• local — данное значение было добавлено из-за того, что в случае с локальным скроллом фон со значением scroll ведет себя как fixed. При значении local фон прокручивается вместе с содержимым элемента, и не прокручивается, если содержимое не скроллится (но прокручивается вместе с самим элементом).

Для лучшего понимания работы свойства взгляните на примеры ниже. Чтобы вы могли их сравнить, ваш браузер должен поддерживать все три значения background-attachment (надеемся, что при изучении CSS вы пользуетесь современным десктопным браузером!).

background-attachment: scroll

background-attachment: fixed

background-attachment: local

Поддержка браузерами

Полная поддержка всех значений свойства background-attachment есть у десктопных браузеров IE9+, Edge 12+, Firefox 25+, Chrome (все версии), Safari 5+, Opera 11.5+. Из мобильных браузеров все значения понимают Opera Mobile, Firefox для Android, IE Mobile и QQ Browser. В других браузерах поддержка либо частичная, либо отсутствует.

Далее в учебнике: свойства background-origin и background-clip для позиционирования фоновых изображений и управления обрезкой.