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

Сокращенное css-свойство background (от англ. background – фон, задний план) используется для одновременного определения сразу нескольких параметров фона, которые могут быть перечислены в произвольном порядке через пробел.

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

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

Синтаксис

background: [<фон>, ]* <последний_фон>, где

<фон> = background-image || background-position [ / background-size ] || background-repeat || background-attachment || background-origin || background-clip;

<последний_фон> = background-image || background-position [ / background-size ] || background-repeat || background-attachment || background-origin || background-clip || background-color

Значения

В качестве значений свойства можно в любом порядке через пробел задать значения свойств background-color, background-image, background-position, background-repeat, background-attachment, background-size, background-origin и background-clip. Если какое-то из значений не будет указано, браузер применит вместо него значение по умолчанию. Разрешается также указывать параметры сразу нескольких фонов, перечисляя их через запятую. При этом, если одновременно с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.

Свойства background-position и background-size принимают свои значения в одном и том же формате. Поэтому, если необходимо задать значение свойства background-size, оно должно указываться через слеш / после значения свойства background-position. Если задано только одно значение, браузер считает, что задано значение свойства background-position.

Кроме того, свойства background-origin и background-clip имеют одни и те же название ключевых слов, принимаемых в качестве значений. Поэтому в случае, когда в элементе установлены как фоновое изображение, так и фон, браузер будет считать, что заданы оба свойства, выделяя соответствующую область элемента под фон и позиционируя соответствующим образом фоновое изображение. Задавать через пробел или слеш / значения обоих свойств не разрешается.

Ссылки

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

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

Примеры

HTML Результат

htmlCodes

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

	<style>
	
		p{
		padding: 10px;
		width: 600px;
		height: 60px;
		border: dotted 6px red;
		}
		
		.background_1{
		background: #00ff00 fixed padding-box;
		}
		
		.background_2{
		background: no-repeat #00ff00  content-box 100px 30px/15px 15px
		url("images/cabinet.png");
		}
		
		.background_3{
		background: no-repeat #00ff00 content-box 
		url("images/cabinet.png");
		}
		
	</style>
	
</head>
<body>
	
	<p class="background_1">
		#00ff00 fixed padding-box
	</p>
	
	<p class="background_2">
		no-repeat #00ff00 content-box <br> 
		100px 30px/15px 15px url("images/cabinet.png")
	</p>
	
	<p class="background_3">
		no-repeat #00ff00 content-box url("images/cabinet.png")
	</p>
		
</body>
</html>

Пример №1