background-attachment¶

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

Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

Демо¶

Фон

Синтаксис¶

/* Keyword values */
background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

/* Global values */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

Значения¶

fixed: Делает фоновое изображение элемента неподвижным.
scroll: Позволяет перемещаться фону вместе с содержимым.
local: Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.

Значение по-умолчанию:

background-attachment: scroll;

Применяется ко всем элементам

Спецификации¶

Поддержка браузерами¶

Can I Use background-attachment? Data on support for the background-attachment feature across the major browsers from caniuse.com.

Описание и примеры¶

Пример 1¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>background-attachment</title>
    <style>
      body {
        background-image: url('/example/image/help.png');
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <div style="height:2000px">Пример текста</div>
  </body>
</html>

Пример 2¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>background-attachment</title>
    <style>
      body {
        background-image: url('/example/image/pattern-left.png'),
          url('/example/image/pattern-right.png');
        background-repeat: repeat-y, repeat-y;
        background-position: left, right;
        background-attachment: fixed, fixed;
      }
    </style>
  </head>
  <body>
    <div style="height:2000px"></div>
  </body>
</html>