CSS свойство background

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

CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Значения могут быть указаны в любом порядке (и в любом необходимом количестве), браузер автоматически определит, какое из них соответствует необходимому свойству.

Значения следующих свойств могут быть установлены:

background-color (color | transparent| initial | inherit).
background-image (url | none | initial | inherit).
background-position (значение).
background-size (auto | length | cover | contain | initial | inherit).
background-repeat (repeat | repeat-x |repeat-y | no-repeat | initial | inherit).
background-origin (padding-box | border-box | content-box | initial | inherit).
background-clip (border-box | padding-box | content-box | initial | inherit).
background-attachment (scroll | fixed | local | initial | inherit).

Обращаю Ваше внимание на то, что если Вы используете для фона элемента значения position и size вместе, то вы должны при этом разделять их слэшем "/" (position/size).

Подробную информацию о работе с задним фоном элементов Вы можете найти в следующей статье учебника:

"Учебник CSS 3. Статья 'Работа с фоном элемента в CSS'."

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

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

CSS синтаксис:

background:"color image position/size repeat origin clip attachment initial | inherit";

JavaScript синтаксис:

object.style.background="blue no-repeat"

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

Значение	Описание
background-color	Определяет цвет фона (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета").
background-image	Задает одно или несколько фоновых изображений для элемента.
background-position	Задает положение (позицию) фонового изображения.
background-size	Определяет размер фонового изображения/-ий.
background-repeat	Устанавливает, как фоновое изображение будет повторяться.
background-origin	Определяет область позиционирования фонового изображения/-ий.
background-clip	Определяет область рисования фона.
background-attachment	Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1 (в CSS3 добавлены свойства background-size css3

, background-origin css3

и background-clip css3

Наследуется

Нет.

Анимируемое

Да.

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

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования универсального свойства background</title>
<style> 
.primer {
background:#00FF00 url('/images/smile.png') repeat-x center; /* свойства фона для элемента */
height:150px; /* высота элемента */
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>

В этом примере с использованиме CSS свойства height мы задали для блочного элемента <div> высоту 150 пикселей и с использованием универсального CSS свойства background указали следующие значения для его фона:

зеленый цвет заднего фона в шестнадцатерично системе указания цвета - #00FF00 (background-color).
путь к изображению, которое используется в качестве заднего фона (smile.png) (background-image).
указали, что наше изображение повторяется только по оси X (background-repeat).
указали, что наше изображение позиционируется по центру (background-position).

Результат нашего примера:

CSS свойства