CSS свойство background

CSS свойства

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

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

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


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


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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
background1.01.03.51.04.012.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-sizecss3Определяет размер фонового изображения/-ий.
background-repeatУстанавливает, как фоновое изображение будет повторяться.
background-origincss3Определяет область позиционирования фонового изображения/-ий.
background-clipcss3Определяет область рисования фона.
background-attachmentУстанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1 (в CSS3 добавлены свойства background-sizecss3, background-origincss3 и background-clipcss3).

Наследуется

Нет.

Анимируемое

Да.

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

<!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 указали следующие значения для его фона:

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

CSS свойства