background-attachment

Пример

Фоновое изображение, которое не будет прокручиваться вместе со страницей (исправлено):

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;
}

Попробуйте сами »