Перейти к содержанию

background-image

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

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

Демо

Фон

Синтаксис

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
/* 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

Отменяет фоновое изображение для элемента.

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

1
background-image: none;

Применяется ко всем элементам

Спецификации

Поддержка браузерами

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

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

Описание и примеры

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!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>

Комментарии