Встановлює фонове зображення для елемента. Якщо для елемента одночасно встановлено колір фону, він буде показаний, доки фонове зображення не завантажиться повністю. Те саме станеться, якщо зображення не доступні або їх показ у браузері вимкнено. У разі наявності в малюнку прозорих областей, через них проглядатиме фоновий колір. Допустимо вказувати кілька фонових зображень, перераховуючи їх параметри через кому.
| Значення за замовчуванням | none |
|---|---|
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
<code>background-image: url(<адреса>) | none[, url(<адреса>) | none]*
Позначення
| Опис | Приклад | |
|---|---|---|
| <тип> | Вказує тип значення. | <розмір> |
| A && B | Значення повинні виводитися у зазначеному порядку. | <розмір> && <колір> |
| A | B | Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). | normal | small-caps |
| A || B | Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. | width || count |
| [ ] | Групує значення. | [ crop || cross ] |
| * | Повторювати нуль або більше разів. | [,<час>]* |
| + | Повторювати один або більше разів. | <число>+ |
| ? | Вказаний тип, слово або група не є обов'язковим. | inset? |
| {A, B} | Повторювати не менше A, але не більше B разів. | <радіус>{1,4} |
| # | Повторювати один або більше разів через кому. | <час># |
Значення
- url
- В якості значення використовується шлях до графічного файлу, який вказується всередині конструкції url(). Шлях до файлу при цьому можна писати як у лапках (подвійних або одинарних), так і без них.
Приклад
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title> <style> body { background-image: url(/example/image/bg.jpg); /* Шлях до фонового зображення */
background-color: #c7b39b; /* Колір тла */
}
</style>
</head>
<body> <p>...</p>
</body>
</html> Об'єктна модель
Об'єкт.style.backgroundImage
Примітка
Internet Explorer до версії 7 включно застосовує фон до внутрішньої частини межі елемента, який має властивість hasLayout. Якщо елемент не має hasLayout, властивість background-image враховуватиме межі елемента, як це й задано у специфікації. Різниця в відображенні буде помітна, якщо межі пунктирні (dashed або dotted), а не суцільні.
Якщо для елемента значення overflow встановлено як scroll або auto, в Internet Explorer 8 буде вертикальна затримка в один піксель при прокручуванні фону.
Якщо фон задається для рядка таблиці (елемент <tr>), то Chrome і Safari відображають його не так, як наказує специфікація, а саме для кожного осередку окремо. Хоча браузер повинен показувати цілісний фон для всього ряду. У прикладі нижче наведений код, що демонструє помилку.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон для TR</title> <style> table {width: 100%; border-spacing: 0; }
tr { background: #f6d654 url(images/orangebg.png) repeat-y; }
</style>
</head>
<body> <table> <tr> <td>1</td><td>2</td><td>3</td>
</tr>
</table>
</body>
</html>Результат цього прикладу в браузері Chrome показаний на рис. 1. Браузер Internet Explorer, Opera та Firefox коректно відображають фон для рядка (мал. 2).
Мал. 1. Повторення фону для кожного осередку
Рис. 2. Фон для всього рядка
Специфікація
| Специфікація | Статус |
|---|---|
| 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 |