| CSS | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 2.1 | 6.0+ | 9.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 2.1+ | 1.0+ |
| 3 | 9.0+ | 1.0+ | 10.5+ | 1.3+ | 3.6+ | 2.1+ | 1.0+ | |
Коротка інформація
Встановлює фонове зображення для елемента. Якщо одночасно для елемента заданий колір фону, він буде показаний, поки фонове зображення не завантажиться повністю. Те ж стосується випадку, коли зображення недоступні або їх відображення в браузері вимкнено. У випадку наявності у малюнку прозорих областей, через них буде проглядати фоновий колір. У CSS3 можна вказувати декілька фонових зображень, перераховуючи їх параметри через кому.
Синтаксис
| CSS2.1 | |
| CSS3 | |
Значення
- url
- Як значення використовується шлях до графічного файлу, який вказується всередині конструкції url(). Шлях до файлу при цьому можна писати як у лапках (подвійних або одинарних), так і без них.
- none
- Скасовує фонове зображення для елемента.
- inherit
- Наслідує значення батька.
Приклад 1
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image</title>
<style>
body {
background-image: url(images/bg.jpg); /* Шлях до фонового зображення */
background-color: #c7b39b; /* Колір фону */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>Об'єктна модель
[window.]document.getElementById("elementID").style.backgroundImage
Браузери
Internet Explorer до версії 7.0 включно застосовує фон до внутрішньої частини межі елемента, у якого встановлено властивість hasLayout. Якщо у елемента немає hasLayout, властивість background-image буде враховувати межі елемента, як це і задано в специфікації. Різниця в відображенні буде помітна, якщо межі пунктирні (dashed або dotted), а не сплошні.
Якщо для елемента значення overflow встановлено як scroll або auto, в Internet Explorer 8 буде вертикальне затримання на один піксель при прокручуванні фону.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Якщо фон задається для рядка таблиці (тег <tr>), то Chrome, Safari, iOS відображають його не так, як вимагає специфікація, а саме для кожної комірки окремо. У той же час браузер повинен показувати цілковитий фон для всього ряду. У прикладі 2 наведено код, що демонструє помилку.
Приклад 2
HTML5CSS2.1IECrOpSaFx
<!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. Фон для всього рядка