Свойство background-attachment

Свойство background-attachment задает каким образом прокручивать фоновую картинку элемента: вместе с текстом или текст будет скользить по картинке.

Синтаксис

селектор {
	background-attachment: fixed | scroll | local;
}

Значения

Значение	Описание
fixed	Картинка фона будет неподвижной, а текст будет скользить по ней.
scroll	Картинка фона будет прокручиваться вместе с текстом.
local	Фон фиксируется с учетом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остается на месте.

Значение по умолчанию: scroll.

Пример . Значение scroll

Сейчас свойство background-attachment установлено в значение scroll. Прокрутите элемент по вертикали - вы увидите, как текст прокручивается вместе с фоном:

<body>
	<div id="elem">
		какой-то длинный текст...
	</div>
</body>

body {
	background-attachment: scroll;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

Пример . Значение scroll

А теперь свойство background-attachment установлено в значение fixed. Прокрутите элемент по вертикали - вы увидите, как текст скользит по фону:

<body>
	<div id="elem">
		какой-то длинный текст...
	</div>
</body>

body {
	background-attachment: fixed;
	background-image: url("bg.png");
}

#elem {
	width: 400px;
	margin: 0 auto;
	text-align: justify;
	font-weight: bold;
	font-size: 20px;
}

Смотрите также

свойство background,
представляющее собой свойство-сокращение для фона