CSS свойство background-image

Определение и применение

CSS свойство background-image задает одно или несколько фоновых изображений для элемента. Фон элемента - общий размер элемента, включая значения padding и border, но не включая значение свойства margin. По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Желательно всегда устанавливать цвет фона, который будет использоваться, в случае если изображение по каким-то причинам будет недоступно.

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
background-image	1.0	1.0	3.5	1.0	4.0	12.0

CSS синтаксис:

background-image:"url | none | initial | inherit";

JavaScript синтаксис:

object.style.backgroundImage="url(img.jpg)"

Значения свойства

Значение	Описание
url('URL')	URL-адрес изображения. Для того, чтобы указать более одного изображения, необходимо перечислить URL-адреса изображений через запятую.
none	Фоновое изображение не отображается. Значение по умолчанию.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-image </title>
<style> 
.primer {
background-image:url("smile.png");
background-color:khaki;
height:110px;
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>

CSS свойства