СSS Свойство background-attachment
Пример
Фоновое изображение, которое не будет прокручиваться вместе со страницей (фиксированно):
body{
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Попробуйте сами »
Определение и Использование
Свойство background-attachment задает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным.
| Значение по умолчанию: | scroll |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | 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;
}
Попробуйте сами »
Пример
Как создать простой эффект параллакса прокрутки (создать иллюзию 3D глубины):
.fixed-bg {
/* Фоновое изображение */
background-image: url("img_tree.gif");
/* Установите заданную высоту или минимальную высоту для фонового изображения */
min-height: 500px;
/* Установите фоновое изображение на фиксированное (не прокручивайте вместе со страницей) */
background-attachment: fixed;
/* Центр фонового изображения */
background-position: center;
/* Установите фоновое изображение на нет повторять */
background-repeat: no-repeat;
/* Масштабируйте фоновое изображение так, чтобы оно было как можно больше */
background-size: cover;
}
Попробуйте сами »
Связанные страницы
CSS учебник: CSS Background
HTML DOM справочник: свойство backgroundAttachment
