Властивість background-attachment встановлює, чи буде прокручуватися фонове зображення разом із вмістом елемента. Зображення може бути зафіксовано та залишатися нерухомим, або переміщатися разом із документом. Можна вказати кілька значень для ряду фонових зображень, перераховуючи значення через кому.
="block_title" id="field_css_info">Коротка інформація
| Значення за замовчуванням | scroll |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
background-attachment: fixed | scroll | local[, fixed | scroll | local]*
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- fixed
- Робить фонове зображення елемента нерухомим.
- scroll
- Дозволяє переміщення фону разом із вмістом.
- local
- Фон фіксується з урахуванням поведінки елемента. Якщо елемент має прокручування, фон прокручується разом із вмістом, але фон, що виходить за рамки елемента, залишається на місці.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title> <style> body { background-image: url(/example/image/help.png); /* Шлях до фонового зображення */
background-attachment: fixed; /* Фіксуємо фон веб-сторінки */
}
</style>
</head>
<body> <div style="height:2000px"> Приклад тексту
</div>
</body>
</html> <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title> <style> body { background-image: url(/example/image/pattern-left.png), url(/example/image/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> Об'єктна модель
Об'єкт.style.backgroundAttachment
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Можлива рекомендація |
| CSS Level 2 Revision 1 (CSS 2.1) | Рекомендація |
| CSS Level 1 | Рекомендація |
Специфікація
Кожна специфікація проходить кілька стадій схвалення.
- Recommendation (Рекомендація) — специфікація схвалена W3C і рекомендована як стандарт.
- Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
- Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
- Draft (Чернетка специфікації) — перша чорнова версія стандарту.
Браузери
| один фон | 4 | 12 | 1 | 3.5 | 1 | 1 |
| кілька фонів | 9 | 12 | 1 | 10.5 | 1.3 | 3.6 |
| local | 9 | 12 | 4 | 10.5 | 5 | 25 |
| один фон | 2.1 | 1 | 10 | 3.2 |
| кілька фонів | 2.1 | 1 | 10 | 3.2 |
| local | 2.1 | 25 | 10 | 3.2 |
Браузери
У таблиці браузерів застосовуються такі позначення.
- — властивість повністю підтримується браузером з усіма допустимими значеннями;
- — властивість браузером не сприймається та ігнорується;
- — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення діють або властивість прим є не до всіх елементів, які вказані в специфікації.
Кількість вказує версію браузера, починаючи з якої властивість підтримується.
-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">