Свойство 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,
представляющее собой свойство-сокращение для фона