background-attachment

Описание

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

background-attachment
Значения: fixed | scroll | inherit | local
Начальное значение: scroll
Область применения: все элементы
Наследование: нет
Поддержка браузерами: основные значения Internet Explorer 4+, Chrome 1+, Opera 3.5+, Safari 1+, Firefox 1+, Android 2.1+
Поддержка браузерами: многослойные фоны Internet Explorer 9+, Chrome 1+, Opera 10.5+, Safari 1.3+, Firefox 3.6+, Android 2.1+
Поддержка браузерами: значение local Internet Explorer 9+, Chrome 4+, Opera 10.5+, Safari 5+
Версия CSS: CSS1, CSS2, CSS 2.1, CSS3
Синтаксис JavaScript object.style.backgroundAttachment="fixed"
Примечание:

В спецификации CSS3 свойство background-attachment поддерживает многослойные фоны и значение local для локального примения.

Синтаксис

background-attachment:  attachment[, attachment]*

где attachment — одно из поддерживаемых значений.

Значения

Свойство background-attachment может принимать следующие значения:

fixed
Положение фонового изображения будет зафиксировано
scroll
Фоновое изображение будет прокручиваться вместе с содержимым
inherit
Наследует значение родительского элемента
local
Фоновое изображение прокручивается вместе с содержимым элемента, если для элемента доступна прокрутка.
Значение inherit не поддерживает IE7 и более старые версии браузера.

Пример

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<style>
.box {
    width: 300px;
    height: 200px;
    background: url(img.jpg);
	background-attachment: fixed;
</style>
	<title>Свойство CSS background-attachment</title>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

Свойство background-attachment в спецификации CSS3 поддреживает многослойные фоны. В этом случае для всех изображений устанавливают значения свойства, разделяя их.

Пример

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<style>
.box {
    width: 300px;
    height: 200px;
    background: url(img.jpg), url(img2.jpg);
	background-attachment: fixed, scroll;
</style>
	<title>Свойство CSS background-attachment</title>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

ДЕМО

Комментирование запрещено.