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

css-свойство background-color (от англ. background color – цвет фона) используется для установки цвета фона элемента.

Несмотря на то, что свойство background-color не является наследуемым, дочерние элементы в некоторых случаях могут отображаться на фоне того же цвета, что и родительский элемент, т.к. по умолчанию браузеры используют прозрачный фон элементов.

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

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

Синтаксис

background-color: <цвет> | transparent

Значения

В качестве значений свойство background-color принимает цвет, который можно задать одним из допустимых способов, указав ключевое слово цвета, его шестнадцатеричное значение или же использовав синтаксис одной из цветовых моделей rgb, rgba, hsl или hsla. Кроме того, имеется специальное значение transparent, которое устанавливает прозрачный фон элемента.

Ссылки

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

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

Примеры

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