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

CSS свойства

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

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
background-attachment1.01.03.51.04.012.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 свойства