CSS свойство background

Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию. Позволяет установить одновременно до пяти атрибутов стиля фона – background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment. Одновременно допустимо определять любые атрибуты.

CSS синтаксис

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

Возможные значения

Значение Описание
background-color Устанавливает цвет фона.
background-image Устанавливает фоновое изображение.
background-position Устанавливает положение фонового изображения.
background-size Устанавливает размер фонового изображения.
background-repeat Определяет, как будет повторяться фоновое изображение.
background-origin Устанавливает область позиционирования фонового изображения.
background-clip Устанавливает область прорисовки фонового изображения.
background-attachment Устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента.
initial Устанавливает значение по умолчанию.
inherit Значение наследуется от родительского элемента.

Если среди параметров присутствует декларация размера bg-size, то он должен быть отделен от параметра позиции bg-position при помощи слэша (/), например, background:url(smiley.gif) 10px 20px/50px 50px; задает фоновое изображение, расположенное в позиции 10 пикселей от левого края, 20 пикселей от верхнего края, и размер изображения будет 50х50 пикселей.

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

Пример

Устанавливаем атрибуты фона элемента body


body {
   background: red url(images/poobah.gif) no-repeat top left;
}