Універсальна властивість background дозволяє встановити одночасно кілька характеристик фону. Значення можуть у будь-якому порядку, браузер сам визначить, яке їх відповідає потрібному властивості. Для детального ознайомлення дивіться інформацію про кожну властивість окремо. Допустимо також вказувати параметри відразу декількох фонів, перераховуючи їх через кому.
Коротка інформація
| Значення за замовчуванням | transparent || none || repeat || scroll || 0% 0% |
|---|---|
| Спадковується | Ні |
| Застосовується | Ко всім елементам |
| Анімується | Так |
Синтаксис
<code>background: [<фон>, ]* <останній_фон>
Тут:
<фон>=background-image || background-position [ /background-size ]? || background-repeat || background-attachment || background-origin || background-clip
<останній_фон>=background-image | background-position[/background-size]? || background-repeat || background-attachment || background-origin || background-clip || background-color
Якщо поряд з фоновими зображеннями потрібно встановити колір фону елемента, він вказується в останню чергу після перерахування.
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися в зазначеному порядку. | <размер> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
Будь-які комбінації значень, що розділяються між собою пробілом, що визначають стиль фону, у довільному порядку. Жодне значення не є обов'язковим, тому не можна опустити.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title> <style> div { height: 200px; /* Висота блоку */
width: 200px; /* Ширина блоку */
overflow: auto; /* Додаємо смуги прокручування */
padding-left: 15px; /* Відступ від тексту ліворуч */
background: url(/example/image/hand.png) repeat-y #fc0; /* Колір фону, шлях до фонового зображення та повторення фону по вертикалі */
}
</style>
</head>
<body> <div>Великобританія, куди входять Пік-Дістрикт, Сноудонія та інші численні національні резервати природи та парки, непомірно застосовує культурний рельєф. Суша морів починає туристичний підземний стік. Дощова погода дегустує кандим. Винний фестиваль проходить у присадибному музеї Георгікон, там же безмитне ввезення речей та предметів у межах особистої потреби пов'язує білий саксаул. Санітарний та ветеринарний контроль оформляє міський Гвіанський щит.</div>
</body>
</html>Результат даного прикладу показаний нижче (рис. 1).
Мал. 1. Вид фону та фонового малюнка в блоці фіксованого розміру
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title> <style> body { background: url(/example/image/hand.png) repeat-y, url(/example/image/bg-right.png) repeat-y 100% 0, #fc0; }
</style>
</head>
<body>
</body>
</html> Об'єктна модель
Об'єкт.style.background
Специфікація
| Специфікація | Статус |
|---|---|
| CSS Backgrounds and Borders Module Level 3 | Можлива рекомендація |
| CSS Le vel 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 |