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

css-свойство background-image (от англ. background image – фоновое изображение) используется для установки фонового изображения элемента. Если фоновых изображений указывается несколько, то приоритет будет отдаваться первым из них, т.е. изображения, указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. Если одновременно заданы background-color и background-image, то цветной фон будет отображаться до момента полной загрузки фонового изображения или вместо него из-за невозможности установки изображения в качестве фона элемента. Кроме того, если изображение будет иметь прозрачные фрагменты, через него будет просвечиваться и цвет обычного фона.

Характеристики

Значение по умолчанию: none.
Применяется: ко всем элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.backgroundImage="value".

Синтаксис

background-image: [url(<адрес>) | none]#

Значения

url – путь к одному или нескольким файлам изображений, перечисляемых через запятую в формате {background-image: url("path_1"), url("path_2"), ...}, где адрес можно писать как в кавычках (двойных или одинарных), так и без них.
none – фоновое изображение установлено не будет.

Ссылки

Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-image

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-image

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		p{
		padding: 1em;
		width: 300px;
		min-height: 50px;
		border: solid green 2px;
		}
		
		.background_1{
		background-color: yellow;
		}
		
		.background_2{
		background-color: #0000ff;
		background-image: url("images/balls_2015.jpg");
		}
		
	</style>
	
</head>
<body>

	<p class="background_1">
		Данный абзац имеет желтый фон.
	</p>
	
	<p class="background_2">
		По умолчанию фоновое изображение располагается браузером в левом
		верхнем углу и затем повторяется по вертикали и горизонтали. 
		Если изображение не будет загружено, то будет использован синий фон, 
		заданный в свойстве background-color.
	</p>
	
</body>
</html>

Пример №1