Фон-вложение - CSS-хитрости

background-attachmentСвойство в CSS определяет , как переместить фон относительно окна просмотра.

Есть три значения: scroll, fixed, и local. Лучше всего объяснить это с помощью демонстрации (попробуйте прокрутить отдельные фоны):

См. Демонстрацию вложения Pen Background Тимоти Миллера (@tjacobdesign) на CodePen.

Говоря о двух разных представлениях, следует учитывать background-attachment: основное представление (окно браузера) и локальное представление (вы можете увидеть это в демонстрации выше).

scrollзначение по умолчанию. Он прокручивается с основным видом, но остается фиксированным внутри локального представления.

fixedостается неизменным, несмотря ни на что. Это похоже на физическое окно: перемещение вокруг окна меняет вашу перспективу, но не меняет положение вещей за пределами окна.

localбыл изобретен, потому что scrollзначение по умолчанию действует как фиксированный фон. Прокручивается как с основным, так и с локальным видом. С ним можно делать несколько интересных вещей.

Связанный

фоновый клип
фоновый цвет
фоновая картинка
фон-происхождение
фоновая позиция
фон-повтор
размер фона

Дополнительные ресурсы

CSS3 Spec
MDN

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

fixedИ scrollподдерживаются значения всюду, хотя fixedможет вести себя странно на мобильном телефоне. localподдерживает этот браузер:

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.