W3docs
ru
Войти

Свойство CSS background-attachment

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

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

На этой странице описывается каждое значение, когда каждое из них следует применять, и одна особенность (мобильные устройства), которая часто сбивает с толку.

Значения

background-attachment принимает пять значений:

  • scroll (по умолчанию) — фон закреплён относительно элемента, поэтому он не перемещается при прокрутке собственного содержимого элемента, но перемещается при прокрутке страницы. На практике это означает «прокручивается вместе со страницей».
  • fixed — фон закреплён относительно viewport. Он остаётся неподвижным, пока всё остальное прокручивается, и контент как будто скользит поверх неподвижного изображения. Именно так создаётся классический эффект параллакса / фиксированного баннера.
  • local — фон закреплён относительно содержимого элемента. При прокрутке внутри прокручиваемого элемента (overflow: auto) фон прокручивается вместе с этим содержимым.
  • initial — сбрасывает свойство до значения по умолчанию (scroll).
  • inherit — берёт значение от родительского элемента.

Разница между scroll и local заметна только на элементе, у которого есть своя полоса прокрутки. На обычной прокручиваемой странице они выглядят одинаково.

В JavaScript имя DOM-свойства записывается в camelCase: element.style.backgroundAttachment.

Начальное значениеscroll
Применяется кВсем элементам. Также применяется к ::first-letter и ::first-line.
НаследуетсяНет.
АнимируемоеНет.
ВерсияCSS1
DOM-синтаксисobject.style.backgroundAttachment = "scroll";

Синтаксис

Синтаксис свойства CSS background-attachment

background-attachment: scroll | fixed | local | initial | inherit;

Пример свойства background-attachment со значением "scroll":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image scrolls with the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Попробуйте сами »

В следующем примере фоновое изображение «зафиксировано» и не перемещается вместе со страницей.

Пример свойства background-attachment со значением "fixed":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 400px 100px;
      }
      .scroll-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="scroll-container">
      <p>The background-image is fixed. Try to scroll down the page.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Попробуйте сами »

Пример свойства background-attachment со значением "local":

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .local-container {
        height: 300px;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
        background-image: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-attachment: local;
        background-size: 400px 100px;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <div class="local-container">
      <p>The background-image scrolls with the element's contents, not the viewport. Try to scroll down.</p>
      <p>More content to demonstrate scrolling...</p>
      <p>Keep scrolling...</p>
      <p>Almost there...</p>
      <p>End of content.</p>
    </div>
    <p>If you do not see any scrollbars, try to resize the browser window.</p>
  </body>
</html>
Попробуйте сами »

Пример свойства background-attachment с фиксированным фоновым изображением и background-size: cover:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .example {
        background-image: url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg");
        min-height: 500px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>background-attachment example</h2>
    <p>Scroll the page to see the effect.</p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>
Попробуйте сами »

Когда использовать каждое значение

  • Используйте fixed, когда нужно зафиксировать hero-изображение или фон на всю страницу, поверх которого прокручивается контент — это самый простой способ получить параллакс-эффект без JavaScript.
  • Используйте local, когда прокручиваемый блок (панель чата, список кода, карточка с overflow: auto) должен сохранять фон привязанным к прокручиваемому содержимому, а не к самому блоку.
  • Оставьте scroll для обычных фонов страницы, которые должны естественно прокручиваться вместе с ней.

Особенность: fixed на мобильных устройствах

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

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

Связанные свойства

background-attachment обычно используется вместе с другими свойствами фона:

  • background-image — прикрепляемое изображение.
  • background-position — положение изображения.
  • background-repeat — мозаичное повторение изображения.
  • background-size — cover и contain хорошо сочетаются с fixed.
  • background — сокращённое свойство, задающее все параметры сразу.

Практика

Практика
Какие из перечисленных значений являются допустимыми для свойства CSS background-attachment?
Какие из перечисленных значений являются допустимыми для свойства CSS background-attachment?
Was this page helpful?