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 для позиционирования фоновых изображений и управления обрезкой.