background-attachment
Поддержка браузерами
|
|
|
|
|
|
12.0+ |
4.0+ |
1.0+ |
1.0+ |
3.5+ |
1.0+ |
Описание
CSS свойство background-attachment устанавливает, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.
Допускается указывать несколько значений для ряда фоновых изображений, перечисляя их через запятую. Каждое новое значение применяется к соответствующему фоновому изображению в том порядке, который определён в свойстве background-image.
Значение по умолчанию: |
scroll |
Применяется: |
ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
Анимируется: |
нет |
Наследуется: |
нет |
Версия: |
CSS1 |
Синтаксис JavaScript: |
object.style.backgroundAttachment="fixed" |
Синтаксис
background-attachment: scroll|fixed|local|inherit;
Значения свойства
Значение |
Описание |
scroll |
Фоновое изображение фиксируется по отношению к самому элементу и не прокручивается вместе с его содержимым, т.е. если элемент имеет прокрутку, то изображение остаётся на месте. Если страница имеет прокрутку, то фоновое изображение прокручивается вместе с элементом. |
fixed |
Фоновое изображение фиксируется по отношению к области просмотра окна браузера, поэтому фон остаётся не подвижным при прокрутке содержимого страницы и/или содержимого элемента. Примечание: фиксированное фоновое изображение располагается относительно верхнего левого угла области просмотра окна браузера, а не элемента. |
local |
Фоновое изображение фиксируется по отношению к содержимому элемента, т.е. если элемент имеет прокрутку, фоновое изображение прокручивается вместе с содержимым элемента. |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Название документа</title>
<style>
body { height: 1000px; margin: 0; }
div { width: 300px; height: 200px; margin-bottom: 10px; overflow: auto; }
#scroll { background: #00ff00 url('cogs.png') no-repeat scroll; }
#local { background: #00ff00 url('cogs.png') no-repeat local; }
#fixed { background: #00ff00 url('cogs.png') no-repeat fixed; }
</style>
</head>
<body>
<div id="scroll">scroll<br>scroll<br>scroll<br>scroll<br>
scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>scroll<br>
scroll<br>scroll<br>scroll<br>scroll<br></div>
<div id="fixed">fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>fixed<br>
fixed<br>fixed<br>fixed<br></div>
<div id="local">local<br>local<br>local<br>local<br>local<br>
local<br>local<br>local<br>local<br>local<br>local<br>
local<br>local<br>local<br>local<br>local<br>local<br>
local<br>local<br>local<br></div>
</body>
</html>
Попробовать »