Как зафиксировать фон в CSS

Чтобы зафиксировать фон в CSS, необходимо использовать свойство background-attachment. Это свойство позволяет задавать значение, которое определяет, будут ли фоновые изображения прокручиваться вместе со страницей или оставаться на месте.

Существует два значения для свойства background-attachment:

scroll — значение по умолчанию, когда фоновое изображение будет прокручиваться вместе со страницей.
fixed — фоновое изображение останется на месте и не будет двигаться при прокрутке страницы.

Вот пример CSS-кода, который зафиксирует фон:

body {
  background-image: url('path/to/your/image.jpg');
  background-attachment: fixed;
  /* другие свойства фонового изображения */
}

Кроме того, можно использовать короткую запись свойства background для задания всех свойств фонового изображения, включая фиксацию на месте:

body {
  background: url('path/to/your/image.jpg') fixed center no-repeat;
}

Также, для современных браузеров доступно свойство background-attachment: local;, которое позволяет зафиксировать фоновое изображение на блоке элемента. Чтобы использовать его, необходимо задать контейнеру блока значение position: relative; и добавить свойство background-attachment: local;.

Например:

.container {
  position: relative;
  background-image: url('path/to/your/image.jpg');
  background-attachment: local;
  /* другие свойства фонового изображения */
}

Изображение будет зафиксировано на блоке элемента и будет оставаться на месте при прокручивании содержимого блока.