CSS свойство background

CSS свойство background является сокращенным свойством для установления всех свойств фонового стиля. Background содержит следующие свойства:

Свойство background-color используется для изменения цвета какого-либо тег фона.

Свойство background-image устанавливает одно или несколько изображений в качестве фона для элемента.

При использовании свойства background-repeat можно контролировать повторяющееся позиционирование элемента.

Свойство background-position устанавливает позицию фонового изображения.

Свойство background-origin определяет, где будет позиционироваться фоновое изображение.

Свойство background-clip используется для установления фонового изображения или цвета под границами.

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

Свойство background-size определяет размер фонового изображения.

Значение по умолчанию Смотрите индивидуальные свойства.
Применяется Ко всем элементам, а также к ::first-letter.
Наследуется Нет
Анимируемое Да. Background-color, background-position и background-size анимируемы.
Версия CSS1+ new properties in CSS3
DOM синтаксис object.style.background = "blue url(img.jpeg) bottom left repeat";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
      background: #8ebf42; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background</h2>
    <p>Здесь установлен зеленый цвет для background color.</p>
  </body>
</html>

Рассмотрим пример, где добавлено изображение для свойства background:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body  {
      background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background</h2>
    <p>Здесь использовано фоновое изображение.</p>
  </body>
</html>

Пример со свойством background, где применены значения background-color, background-image, background-repeat и background-attachment.

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background: #ccc url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center; 
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background</h2>
    <p>В этом примере свойство background указывает на свойства background-color, background-image для установления фонового изображения, background-repeat - для установления неповторяющегося изображения, background-attachment - для установления фиксированного изображения и background-position - для установления изображения в центре.</p>
  </body>
</html>

Рассмотрим другой пример со свойством background-size, который устанавливает размер фона:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
      background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background</h2>
    <p>Здесь установлен размер фонового пространства на 100px.</p>
  </body>
</html>

Пример с background-clip. Свойство определяет, насколько должен расшириться фон внутри элемента:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: 8px dotted #ccc;
      padding: 25px;
      background: #ccc;
      background-clip: padding-box;  
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background</h2>
    <div>
      <p>Background-clip для этого div элемента установлена на padding-box.</p>
    </div>
  </body>
</html>

Пример со свойством background-origin . Здесь фоновое изображение запускается с левого верхнего угла контента:

Пример

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
      border: 10px double #ccc;
      padding: 25px;
      background: url("/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
      background-repeat: no-repeat;
      background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства background</h2>
    <p>Здесь установлено свойство background-origin: padding-box (значение по умолчанию).</p>
    <div></div>
  </body>
</html>

Значения

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

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Практикуйте свои знания

Which properties can be used to manage backgrounds with CSS?
Считаете ли это полезным?