Свойство background-attachment определяет, будет ли фоновое изображение «плавно» двигаться вместе с содержимым элемента – как дирижёр управляет визуальным потоком. Вы можете задавать несколько значений для разных слоёв фона, разделяя их запятой. Каждое новое значение применяется к соответствующему изображению в том же порядке, что и указано в background-image. | Значение по умолчанию: | scroll |
|---|
| Наследуется: | нет |
|---|
| Версия: | CSS1 |
|---|
| Синтаксис JavaScript: | object.style.backgroundAttachment="fixed" |
|---|
| Значение | Описание |
|---|
| scroll | Фоновое изображение остаётся привязанным к элементу и не прокручивается вместе с его содержимым. Если у элемента есть собственная прокрутка – фон будет стоять на месте, но при скролле всей страницы он двигаться будет. | | fixed | Фон закрепляется к окну браузера: даже когда вы перемещаете страницу или содержимое элемента, изображение остаётся неподвижным. Позиционируется относительно верхнего левого угла окна – не самого элемента! | | local | Фоновое изображение привязывается к самому содержимому: при прокрутке элемента он будет «плавно» скроллиться вместе с ним, словно живой фон. |
Пример!DOCTYPE htmlhtmlhead 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/headbody div id="scroll"scrollbrscrollbrscrollbrscrollbrscrollbr scrollbrscrollbrscrollbrscrollbrscrollbrscrollbr scrollbrscrollbrscrollbrscrollbrscrollbrscrollbr scrollbrscrollbrscrollbrscrollbr/div div id="fixed"fixedbrfixedbrfixedbrfixedbrfixedbr fixedbrfixedbrfixedbrfixedbrfixedbrfixedbr fixedbrfixedbrfixedbrfixedbrfixedbrfixedbr fixedbrfixedbrfixedbrdiv div id="local"localbrlocalbrlocalbrlocalbrlocalbr localbrlocalbrlocalbrlocalbrlocalbrlocalbr localbrlocalbrlocalbr/div/body/html
|