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;
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
Пример 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>