CSS свойство background-attachment

Определение и применение

CSS свойство background-attachment устанавливает поведение фонового изображения во время прокрутки страницы. По умолчанию изображение прокручивается с остальной частью страницы, но допускается также зафиксировать фон относительно уровня просмотра.

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

"Учебник CSS 3. Статья 'Работа с фоном элемента в CSS'."

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
background-attachment	1.0	1.0	3.5	1.0	4.0	12.0

CSS синтаксис:

background-attachment: "scroll | fixed | local | initial | inherit";

JavaScript синтаксис:

object.style.backgroundAttachment = "scroll"

Значения свойства

Значение	Описание
scroll	Задний фон прокручивается вместе с элементом. Значение по умолчанию.
fixed	Фон фиксируется относительно уровня просмотра.
local	Фон позиционируется относительно содержимого элемента (прокручивается когда прокручивается элемент).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства background-attachment</title>
<style> 
.primerFixed {
height:400px; /* высота элемента */
background-image:url('/images/smile.png'); /* путь к фоновому изображению */
background-attachment:fixed; /* фон фиксируем относительно уровня просмотра */
background-position:center; /* позиционируем фоновое изображение */
background-repeat:no-repeat; /* отключаем повтор фонового изображения по осям */
}
</style>
</head>
	<body>
		<div class = "primerFixed"></div>
		<div style = "height:600px"></div>
	</body>
</html>

В этом примере мы создали два блочных элемента <div>, к первому элементу мы применили стили, которые позволяют указать высоту блока (свойство height), фоновое изображение (background-image), указать, что оно будет статическим (background-attachment), спозиционировать его по центру (background-position) и отключить повторение фонового изображения по осям X и Y (background-repeat). Обращаю Ваше внимание, что вы можете указать все свойства для фона элемента в одном объявлении с использованием универсального свойства background).

Второй элемент представляет из себя пустой блок высотой 600px, он позволит нам продемонстрировать параллакс эффект за счёт прокрутки страницы. Обратите внимание, что наше изображение (первый блок) остается на одном месте и не прокручивается вместе со страницей.

Результат нашего примера (прокрутите страницу вниз для демонстрации):

CSS свойства