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

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

Свойство background-attachment имеет три значения - fixed, scroll и local. Если установлено значение "scroll", фоновое изображение будет прокручиваться вместе со страницей. Значение по умолчанию.

Если задано значение "fixed", при просмотре страницы фоновое изображение останется зафиксированным. Даже если элемент имеет механизм прокрутки, фон не прокручивается вместе со страницей.

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

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

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-size: 400px 100px
      }
    </style>
  </head>
  <body>
    <h2>Пример background-attachment</h2>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение прокручивается вместе со страницей. Попробуйте выполнить прокрутку вниз.</p>
    <p>Если полоса прокрутки не видна, попробуйте изменить размер окна браузера.</p>
  </body>
</html>

Пример с зафиксированным фоновым изображением:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body  {
      background-image: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: 400px 100px
      }
    </style>
  </head>
  <body>
    <h2>Пример background-attachment</h2>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Фоновое изображение зафиксировано. Попробуйте выполнить прокрутку вниз.</p>
    <p>Если полоса прокрутки не видна, попробуйте изменить размер окна браузера.</p>
  </body>
</html>

Пример, где прокручивая можно увидеть, как исчезает зафиксированное фоновое изображение:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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</h2>
    <p> Прокрутите страницу, чтобы увидеть эффект. </p>
    <div class="example"></div>
    <div style="height:800px;background-color:#1c87c9;"></div>
  </body>
</html>

Значения

Значение Описание
scroll Фоновое изображение прокручивается вместе с элементом. Значение по умолчанию.
fixed Фоновое изображение зафиксировано при просмотре страницы.
local Фоновое изображение прокручивается вместе с контентом элемента.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

4.0+ 12.0+ 25.0+ 5.0+ 11.5+


Считаете ли это полезным?

Похожие статьи