background-image
Оновлено: 05.12.2022
background-image
Встановлює фонове зображення для елемента. Якщо одночасно для елемента задано колір фону, він буде показаний, поки фонова картинка не завантажиться повністю. Те саме станеться, якщо зображення не доступні або їхній показ у браузері вимкнено. У разі наявності в малюнку прозорих областей, через них буде проглядати фоновий колір. Припустимо вказувати кілька фонових зображень, перераховуючи їхні параметри через кому.
Коротка інформація
| Значення за замовчуванням | none |
| Успадковується | Ні |
| Застосовується | До всіх елементів |
| Анімується | Ні |
Синтаксис
background-image: url(<адреса>) | none[, url(<адреса>) | none]*
Значення
| url | В якості значення використовується шлях до графічного файлу, який вказується всередині конструкції url(). Шлях до файлу при цьому можна писати як у лапках (подвійних або одинарних), так і без них. |
| none | Скасовує фонове зображення для елемента. |
Приклад
Об'єктна модель
Об'єкт.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>