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	Значение элемента наследуется от родительского элемента.

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

Синтаксис

Пример

Пример

Пример

Значения

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

Практикуйте свои знания