Тег background-attachment у CSS: опис, синтаксис та приклади
Властивість background-attachment встановлює, чи буде прокручуватися фонове зображення разом з вмістом елемента. Зображення може бути зафіксоване і залишатися нерухомим або переміщатися разом з документом. У CSS3 можна вказати кілька значень для ряду фонових зображень, перераховуючи їх через кому.
Синтаксис
| CSS2.1 | |
| CSS3 | |
Значення
- fixed
- Робить фонове зображення елемента нерухомим.
- scroll
- Дозволяє рухатися фону разом із вмістом.
- inherit
- Наслідує значення батька.
- local
- Фон фіксується з урахуванням поведінки елемента.
Приклад 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title>
<style>
body {
background-image: url(images/help.png);
background-attachment: fixed;
}
</style>
</head>
<body>
<div style="height:2000px">
Пример текста
</div>
</body>
</html>Приклад 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title>
<style>
body {
background-image: url(images/pattern-left.png), url(images/pattern-right.png);
background-repeat: repeat-y, repeat-y;
background-position: left, right;
background-attachment: fixed, fixed;
}
</style>
</head>
<body>
<div style="height:2000px">
</div>
</body>
</html>Браузери
У браузері Internet Explorer 6 значення fixed працює лише для тегів <body> або <html>.
Internet Explorer до версії 7.0 не підтримує значення inherit.
Chrome підтримує значення local з версії 4.0.
Safari підтримує значення local з версії 5.0.
Firefox не розуміє значення local.