/css/background-attachment:> Фиксация фонового изображения_
Свойство background-attachment
Синтаксис
CSS 1
CSS 2‒2.2
CSS 3
background-attachment: scroll | fixed | inherit;
Описание
Свойство background-attachment (от англ. "background attachment" ‒ «крепление фона») производит фиксацию фонового изображения относительно области просмотра, содержимого элемента или самого элемента.
| Применяется: | ко всем элементам; |
|---|---|
| Наследование: | отсутствует; |
| Проценты: | Н/Д; |
| Медиа: | визуальные. |
Условия использования
Начиная с CSS3 (через запятую) можно указать принцип фиксации для каждого фонового изображения элемента.
JavaScript
[объект]
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Значения
- fixed
- Фон фиксируется относительно области просмотра, т.е. при прокрутке страницы фон остаётся не месте (не перемещаясь совместно с элементом). В страничных медиа, где нет области просмотра, «fixed» фон фиксируется относительно коробки страницы и, поэтому повторяется на каждой странице.
- local
- Фон фиксируется относительно содержимого элемента, т.е. при прокрутке страницы либо самого элемента фон прокручивается вместе с содержимым элемента.
- scroll
- Фон фиксируется относительно самого элемента (границ элемента) и не прокручивается с его содержимым.
- inherit
- Указывает, что элемент должен унаследовать параметры родительского элемента.
Начальное значение: «scroll».
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-attachment</title>
<style type="text/css">
body { min-height: 550px;
background-image: url('/examples/images/fig-red.png');
background-attachment: fixed;
}
div { display: inline-block; margin: 0 15px; width: 315px; height: 315px; border: 1px solid black; overflow: scroll; }
div p { width: 400px; height: 400px; }
</style>
</head>
<body>
<h1>Крепление фоновых изображений</h1>
<p>Фоновое изображение документа фиксировано (<b>«fixed»</b>) относительно области просмотра.</p><hr>
<div style="background-image: url('/examples/images/fig-green.png'); background-attachment: local;">
<h2>«local»</h2><p>Содержимое 1-ого блока</p>
</div>
<div style="background-image: url('/examples/images/fig-blue.png'); background-attachment: scroll;">
<h2>«scroll»</h2><p>Содержимое 2-ого блока</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Свойство background-attachment</title>
<style type="text/css">
body { min-height: 550px;
background-image: url('/examples/images/fig-red.png');
background-attachment: fixed;
}
div { display: inline-block; margin: 0 15px; width: 315px; height: 315px; border: 1px solid black; overflow: scroll; }
div p { width: 400px; height: 400px; }
</style>
</head>
<body>
<h1>Крепление фоновых изображений</h1>
<p>Фоновое изображение документа фиксировано (<b>«fixed»</b>) относительно области просмотра.</p><hr>
<div style="background-image: url('/examples/images/fig-green.png'); background-attachment: local;">
<h2>«local»</h2><p>Содержимое 1-ого блока</p>
</div>
<div style="background-image: url('/examples/images/fig-blue.png'); background-attachment: scroll;">
<h2>«scroll»</h2><p>Содержимое 2-ого блока</p>
</div>
</body>
</html>
Свойство background-attachment