Фоновое изображение, которое не будет прокручиваться вместе со страницей (исправлено):
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Попробуйте сами »
Определение background-attachment
CSS свойство background-attachment
определяет, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным.
Значение по умолчанию: | scroll |
---|---|
Унаследовано: | no |
Анимируемый: | no. Читайте о animatable |
Версия: | CSS1 |
JavaScript синтаксис: | object.style.backgroundAttachment="fixed" Попробуй |
Поддержка background-attachment
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
Свойство | |||||
---|---|---|---|---|---|
background-attachment | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис background-attachment
background-attachment: scroll|fixed|local|initial|inherit;
Значения background-attachment
Значение | Описание |
---|---|
scroll | Фоновое изображение будет прокручиваться вместе со страницей. Это значение по умолчанию |
fixed | Фоновое изображение не будет прокручиваться вместе со страницей |
local | Фоновое изображение будет прокручиваться вместе с содержимым элемента |
initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial |
inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры background-attachment
Фоновое изображение, которое будет прокручиваться вместе со страницей (scroll). Это значение по умолчанию:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: scroll;
}
Попробуйте сами »
Как создать простой эффект параллаксной прокрутки (создать иллюзию трехмерной глубины):
.fixed-bg {
/* Фоновое изображение */
background-image: url("img_tree.gif");
/* Установите заданную высоту или минимальную высоту для фонового изображения */
min-height: 500px;
/* Установите фоновое изображение на фиксированное (не прокручивайте вместе со страницей) */
background-attachment: fixed;
/* Центр фонового изображения */
background-position: center;
/* Установите фоновое изображение на нет повторять */
background-repeat: no-repeat;
/* Масштабируйте фоновое изображение так, чтобы оно было как можно больше */
background-size: cover;
}
Попробуйте сами »
Страницы по теме background-attachment
CSS Учебник: CSS Background
HTML DOM справочник: backgroundAttachment свойство