Как зафиксировать фон при прокрутке

С помощью CSS-свойства background-attachment можно зафиксировать фон отделного блока или всей страницы на месте и он не будет перемещаться при прокрутке страницы.

CSS-свойство background-attachment может иметь следующие значения:

• fixed — Фон фиксирован относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это несовместимо с background-clip: text)
• local — Фон фиксирован относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается вместе с содержимым элемента, а область фоновой отрисовки и область позиционирования фона относятся к прокручиваемой области элемента, а не к обрамляющей их границе.
• scroll — Фон фиксирован относительно самого элемента и не прокручивается вместе с его содержимым. (Он фактически прикрепляется к границе элемента.)

Итак, чтобы зафиксировать фон, нам нужно свойству background-attachment у элемента задать значение fixed.

.demo {
    background-image: url('fon.jpg');
    background-attachment: fixed;
}

Для наглядности, ниже представлено два примера.

Демо 1

задано значение scroll

Демо 2

фиксированный бэкграунд, задано значение fixed