CSS background-attachment Свойство
Пример
Фоновое изображение, которое не будет прокручиваться со страницей (исправлено):
body{
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Подробнее примеры ниже.
Определение и использование
Свойство background-attachment
задает, прокручивается ли фоновое изображение с остальной частью страницы, или является фиксированным.
Значение по умолчанию: | scroll |
---|---|
Inherited: | no |
Animatable: | no. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.backgroundAttachment="fixed" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: Internet Explorer 8 и более ранние версии не поддерживают несколько фоновых рисунков на одном элементе.
Синтаксис CSS
background-attachment: scroll|fixed|local|initial|inherit;
Значения свойств
Значение | Описание |
---|---|
scroll | Фоновое изображение будет прокручиваться вместе со страницей. Это значение по умолчанию |
fixed | Фоновое изображение не будет прокручиваться вместе со страницей |
local | Фоновое изображение будет прокручиваться вместе с содержимым элемента |
initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Фоновое изображение, которое будет прокручиваться вместе со страницей (Scroll). Это значение по умолчанию:
body{
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
Пример
Как создать простой эффект прокрутки параллакса (создать иллюзию трехмерной глубины):
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
Похожие страницы
CSS Справочник: CSS Background
HTML DOM Справочник: backgroundAttachment Свойство