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

Данное свойство входит в свойство-сокращение background.

См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.

См. также тег img, с помощью которого можно сделать картинку в HTML коде.

Синтаксис

CSS 2.1

селектор {
	background-image: url("путь к картинке");
}
селектор {
	background-image: none;
}
селектор {
	background-image: inherit;
}

CSS 3

В CSS3 можно задавать несколько картинок одновременно, перечисляя их через запятую:

селектор {
	background-image: url('путь к картинке1'), url('путь к картинке2'), url('путь к картинке3');
}

Значения

Значение Описание
url Путь к файлу с картинкой. Название картинки может быть в двойных кавычках, одинарных и вообще без кавычек.
none Отменяет фоновую картинку для элемента.
inherit Наследует значение родителя.

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

Примеры

Пример

В данном примере для body установлена фоновая картинка-узор. По умолчанию узор заполняет собой все окно браузера (хотя сама картинка узора имеет размер порядка 100 на 100 пикселей):

body {
	background-image: url('bg.jpg');
}
#elem {
	margin: 0px auto;
	width: 500px;
	text-align: justify;
	font-weight: bold;
}

Посмотреть пример.