html.okpython.net
HTML и CSS для начинающих

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 – фоновое изображение установлено не будет.

Ссылки

Примеры

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