CSS стиль background-attachment
CSS стиль background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
Изображение может быть зафиксировано и оставаться неподвижным или перемещаться при скроллинге.
Значение local поддерживается с Firefox начиная с 25-й версии
Краткая информация по CSS-свойству background-attachment
Значение по умолчанию | scroll |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства background-attachment
/* В CSS 2.1: */
background-attachment: fixed | scroll | inherit
/* В CSS 3: */
background-attachment: fixed | scroll | local
[, fixed | scroll | local]*
* - В CSS3 можно указать несколько значений для ряда фоновых изображений, перечисляя эти значения через запятую.
fixed - делает фоновое изображение элемента неподвижным.
scroll - фон перемещается вместе с содержимым.
inherit - наследует значение родителя.
local - фон фиксируется на основании поведения элемента. Если элемент имеет прокрутку, то фоновое изображение прокручивается вместе с содержимым. Фон, выходящий за рамки элемента останется неподвижным.
Объектная модель
Объект.style.backgroundAttachment
Пример применения стиля background-attachment
Проиллюстрируем работу background-attachment на примере. Фон нашей страницы будет состоять из 2х картинок, расположенных по бокам. Добавим блоку с контентом div достаточно большую высоту, чтобы появился скролл в окне браузера. С помощью значения fixed зафиксируем фон:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример с background-attachment</title>
<style>
body {
background-position: left, right;
background-attachment: fixed, fixed;
background-repeat: repeat-y, repeat-y;
background-image: url("fon-left.png"),
url("fon-right.png");
}
div {
height: 1000px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>