background-image CSS

Свойство background-image устанавливает фоновое изображение для элемента.

Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

Значение по умолчанию:

none

Наследуется:
Нет
Применяется:

Ко всем элементам

Анимируется:
Нет
Объект JavaScript:

object.style.backgroundImage

Спецификации:
Поддержка браузерами:

Несколько фонов:

Can I Use multibackgrounds? Data on support for the multibackgrounds feature across the major browsers from caniuse.com.

Синтаксис

/* Single value */
background-image: url('https://example.com/bck.png');

/* Multiple values */
background-image: url('https://example.com/top.png'), url('https://example.com/bottom.png');

/* Keyword value */
background-image: none;

/* Global values */ 
background-image: inherit;
background-image: initial;
background-image: unset;

Значения

  • url() — В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
  • none — Отменяет фоновое изображение для элемента.

Примеры

<!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>