background-attachment

background-attachment управляет тем, двигается ли фон при прокрутке страницы или остаётся на месте. Именно оно отвечает за классический параллакс-эффект.

Параллакс-эффект: фон остаётся на месте, а контент прокручивается поверх него.

        
          
          <section class="hero">  <h1>Заголовок</h1></section><section class="content">  <p>Обычный контент...</p></section>
          <section class="hero">
  <h1>Заголовок</h1>
</section>
<section class="content">
  <p>Обычный контент...</p>
</section>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .hero {  background-image: url("mountain.jpg");  background-size: cover;  background-attachment: fixed;  height: 100vh;}
          .hero {
  background-image: url("mountain.jpg");
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При прокрутке страницы фон секции .hero остаётся зафиксированным, создавая глубину между слоями.

У каждого фона есть точка привязки — то, относительно чего он позиционируется при прокрутке. background-attachment эту точку и задаёт.

scroll — фон привязан к самому элементу. Страница скроллится — элемент вместе с фоном движется. Но если у элемента есть собственная прокрутка, фон при ней не сдвигается: он зафиксирован относительно границ элемента, не его содержимого.

fixed — фон привязан к вьюпорту. Страница скроллится, элемент движется, а фон остаётся на месте. Это и создаёт эффект параллакса.

local — фон привязан к содержимому элемента. Если у элемента есть прокрутка, фон скроллится вместе с текстом.

Разница между scroll и local заметна только у элементов с собственной прокруткой (то есть с overflow: scroll или auto). Если у элемента нет скролла, то эти два значения визуально не отличаются.

        
          
          .element {  background-attachment: scroll; /* значение по умолчанию */  background-attachment: fixed;  background-attachment: local;}
          .element {
  background-attachment: scroll; /* значение по умолчанию */
  background-attachment: fixed;
  background-attachment: local;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Значение по умолчанию. Фон зафиксирован относительно самого элемента и не прокручивается вместе с его содержимым. Когда страница скроллится, элемент движется вместе с фоном как единое целое.

Если у элемента есть внутренняя прокрутка, пользователь, листая содержимое, не сдвинет фон, он останется на своём месте внутри элемента.

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

При использовании fixed значение background-origin игнорируется, позиционирование фона всегда считается от вьюпорта.

Фон прикреплён к содержимому элемента. Если у элемента есть скролл, фон прокручивается вместе с содержимым будто это часть самого текста или контента.

Это удобно, например, для элементов с длинным текстом и декоративным паттерном на фоне, который должен двигаться вместе с текстом при прокрутке.

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

        
          
          .element {  background-image: url("stars.png"), url("sky.jpg");  background-attachment: fixed, scroll;}
          .element {
  background-image: url("stars.png"), url("sky.jpg");
  background-attachment: fixed, scroll;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Первое изображение (stars.png) зафиксировано, второе (sky.jpg) прокручивается вместе с элементом.

💡 fixed на мобильных устройствах работает нестабильно. iOS Safari исторически отображает background-attachment: fixed как scroll, игнорируя фиксацию — из-за особенностей реализации скролла. Для мобильных параллакс-эффектов лучше использовать CSS-трансформации или JavaScript.

💡 background-attachment: fixed создаёт новый контекст наложения и может влиять на производительность при прокрутке, так как браузер вынужден перерисовывать фон при каждом шаге скролла. В современных браузерах это оптимизировано, но на слабых устройствах большие fixed-фоны могут вызывать подтормаживания.

💡 Параллакс-эффект с background-attachment: fixed работает только тогда, когда прокручивается именно страница (документ). Если прокручивается контейнер с overflow: scroll, фиксированный фон внутри него не создаст параллакс-эффекта — он просто встанет неподвижно относительно вьюпорта, а не относительно контейнера.

        
          
          .parallax-section {  height: 100vh;  background-image: url("photo.jpg");  background-size: cover;  background-position: center;  background-attachment: fixed;}.content-section {  padding: 60px 40px;  background: #fff;}
          .parallax-section {
  height: 100vh;
  background-image: url("photo.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.content-section {
  padding: 60px 40px;
  background: #fff;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .container {  height: 300px;  overflow-y: scroll;  background-image: url("pattern.svg");  background-repeat: repeat;  background-attachment: local;}
          .container {
  height: 300px;
  overflow-y: scroll;
  background-image: url("pattern.svg");
  background-repeat: repeat;
  background-attachment: local;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .title {  background-image: url("photo.jpg");  background-size: cover;  background-position: center;  background-attachment: fixed;  -webkit-background-clip: text;  background-clip: text;  color: transparent;}
          .title {
  background-image: url("photo.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать