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

css-свойство background-attachment (от англ. background attachment – прикрепление фона) используется для управления поведением фонового изображения при прокрутке элемента, позволяя или запрещая его прокрутку вместе с содержимым элемента.

Характеристики

Значение по умолчанию: scroll.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.backgroundAttachment="value".

Синтаксис

background-attachment: fixed | scroll | local [, fixed | scroll | local]*

Значения

fixed – фоновое изображение фиксируется относительно верхнего левого угла области просмотра окна браузера и не перемещается при прокрутке содержимого страницы или элемента.
scroll – при прокрутке содержимого страницы фоновое изображение будет перемещаться вместе со своим элементом, при этом относительно своего элемента изображение будет фиксировано; значение используется браузерами по умолчанию.
local – фоновое изображение фиксируется не относительно элемента, а относительно его содержимого, поэтому при прокрутке содержимого страницы, оно будет перемещаться вместе с элементом, но стоит начать прокручивать содержимое самого элемента, фоновое изображение начнет перемещаться вместе с содержимым.

В случае использования более одного фонового изображения разрешается указывать через запятую несколько значений.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-attachment

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-attachment

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
		p{
		overflow-y: scroll;
		padding: 10px;
		width: 500px;
		height: 200px;
		border: solid 3px green;
		background-size: cover;
		background-image: url("images/balls_2015.jpg");
		}
		
		.background_1{
		background-attachment: scroll;
		}
		
		.background_2{
		background-attachment: fixed;
		}
		
		.background_3{
		background-attachment: local;
		}
	</style>
	
</head>
<body>
	<p class="background_1">
		background-attachment: scroll<br>
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>
		background-attachment: scroll<br>
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>
		background-attachment: scroll<br>
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
		background-attachment: scroll<br>		
	</p>
	
	<p class="background_2">
		background-attachment: fixed<br>
		background-attachment: fixed<br>		
		background-attachment: fixed<br>		
		background-attachment: fixed<br>		
		background-attachment: fixed<br>
		background-attachment: fixed<br>		
		background-attachment: fixed<br>
		background-attachment: fixed<br>		
		background-attachment: fixed<br>		
		background-attachment: fixed<br>		
		background-attachment: fixed<br>
		background-attachment: fixed<br>
		background-attachment: fixed<br>
		background-attachment: fixed<br>		
		background-attachment: fixed<br>		
		background-attachment: fixed<br>		
		background-attachment: fixed<br>
		background-attachment: fixed<br>		
		background-attachment: fixed<br>
		background-attachment: fixed<br>		
	</p>
	
	<p class="background_3">
		background-attachment: local<br>
		background-attachment: local<br>		
		background-attachment: local<br>		
		background-attachment: local<br>		
		background-attachment: local<br>
		background-attachment: local<br>		
		background-attachment: local<br>
		background-attachment: local<br>		
		background-attachment: local<br>		
		background-attachment: local<br>		
		background-attachment: local<br>
		background-attachment: local<br>
		background-attachment: local<br>
		background-attachment: local<br>		
		background-attachment: local<br>		
		background-attachment: local<br>		
		background-attachment: local<br>
		background-attachment: local<br>
	</p>
	
	<div style="height: 1700px;">
		Блок добавлен для появления прокрутки
		в окне браузера или фрейме.<br>
		Внимательно поюзайте прокрутку фрема и 
		самих блоков.
	</div>
		
</body>
</html>

Пример №1