Твитнуть в Twitter
Властивість background-image встановлює зображення на задній фон елемента. Воно може приймати одне або кілька значень, розділених комами.
Коли встановлено більше одного зображення на фон, то для кожного зображення можна змінювати розмір, позиціонування або встановлювати можливість повтору, згідно з відповідним значенням в інших властивостях фону.
В основному, коли використовується накладення фонових зображень, більшість з них мають прозорі області, що дозволяє бачити інші зображення, що лежать нижче. Дивіться приклад нижче.
Коли встановлено властивість background-image. в CSS також необхідно визначити background color. Воно буде використовуватися, background-image недоступно. Якщо ж background-image доступно, то воно буде перекривати background color. Все бордери, певні для елемента, отрісовиваємих поверх фону. Таким чином ми маємо: background-color на самому низу, зображення на рівень вище і бордери на самому верху.
Те, як отрісовивается зображення щодо блоку і його бордера визначається за допомогою властивостей background-clip і background-origin
Кожне зображення створює «шар» всередині елемента. Навіть якщо значення none, шар все одно створений, просто на ньому нічого не промальовується.
Пусте зображення (ширина і висота дорівнюють нулю), або те зображення, яке прогрузити або ж просто не може бути відображене (на приклад з причини відсутності підтримки даного формату) також вважається як шар, просто на ньому нічого не відображається.
Унаслідок доступності, розробники не радять використовувати фонове зображення як єдиний спосіб передачі важливої інформації. Зображення можуть бути недоступні в неграфічні режимі (наприклад, в режимі читання) або фонові зображення можуть бути вимкнені в режимі високого контрасту.
Властивість background-image дозволяє вставити зображення в документ лише на мові CSS, без використання HTML. Текстова альтернатива необхідна для людей, які не можуть бачити зображення, при тому, що ці зображення несуть важливу інформацію. Таким чином, помилково використовувати дане властивість для додавання зображення, що несе важливу інформацію.
Тим не менш, деякі розробники іноді використовують цю властивість в поєднанні з властивістю text-indent в техніці заміщення зображень (в основному заголовки) і для того, щоб показати графічне представлення даного тексту на його місці. Одна з технік, що служить добрим прикладом для семантичного і доступного способу заміни зображень, продемонстрована Скоттом Кельюмом і ви можете докладніше почитати про неї в статті Replacing the -9999px hack (new image replacement).