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

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

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

CSS 3

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

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

body {
	background-image: url('путь к картинке1'), url('путь к картинке2');
	background-position: top left, 100% 30%;
	background-repeat: repeat-x, no-repeat;
	background-attachment: scroll, local;
}

Значения

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

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

Примеры

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

В данном примере для body установлена фоновая картинка-узор. По умолчанию узор заполняет собой все окно браузера (хотя сама картинка узора имеет размер порядка 100 на 100 пикселей). Свойство background-attachment установлено в значение scroll:

body {
	background-image: url('bg.jpg');
	background-attachment: scroll;
}
#elem {
	margin: 0px auto;
	width: 500px;
	text-align: justify;
	font-weight: bold;
}

Посмотреть пример.

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

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

body {
	background-image: url('bg.jpg');
	background-attachment: fixed;
}
#elem {
	margin: 0px auto;
	width: 500px;
	text-align: justify;
	font-weight: bold;
}

Посмотреть пример.