| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Щоб додати фонову картинку на веб-сторінку, вкажіть шлях до зображення всередині значення url стильового властивості background, яке в свою чергу додається до селектору body.
Загальний синтаксис додавання фону наступний.
<style>
body { background: url(шлях до файлу); }
</style>
Шлях до графічного файлу буде відрізнятися, в залежності від того, де він розташовується щодо поточного документа. Наприклад, якщо HTML-документ і малюнок за іменем bg.gif зберігаються в одній папці, то достатньо задати url(bg.gif).
При додаванні фонової картинки врахуйте, що зображення завантажується не відразу, тому колір фону повинен бути таким, щоб зберегти достатній контраст між кольором тексту і фону. Краще всього встановлювати колір фону близьким до кольору тла, тут знову ж таки допоможе універсальне властивість background, як показано в прикладі 1.
Приклад 1. Додавання фону
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон</title>
<style>
body {
background: #c7b39b url(images/bg.jpg); /* Колір фону і шлях до файлу */
color: #fff; /* Колір тексту */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
В даному прикладі фон веб-сторінки задано кольором хакі, а текст — білим. Також додано фонове зображення, яке при завантаженні закриває собою фоновий колір.