Свойство CSS background

Свойство CSS background — это сокращённое свойство, позволяющее задать все стили фона элемента одним объявлением, вместо того чтобы прописывать каждое свойство отдельной строкой. Под капотом оно разворачивается в следующие отдельные свойства:

background-color — задаёт сплошной цвет фона.
background-image — задаёт одно или несколько фоновых изображений элемента.
background-repeat — управляет тем, повторяется ли фоновое изображение и каким образом.
background-position — задаёт начальное положение фонового изображения.
background-origin — определяет область, относительно которой позиционируется изображение (border-box, padding-box или content-box).
background-clip — определяет, как далеко фон (цвет и изображение) распространяется внутри элемента.
background-attachment — определяет, прокручивается ли фон вместе со страницей или остаётся фиксированным.
background-size — задаёт размер фонового изображения.

Зачем использовать сокращённую запись

Одна строка с background короче и читается легче, чем пять или шесть отдельных свойств, и делает намерение очевидным с первого взгляда. Есть один важный побочный эффект: сокращённое свойство сбрасывает все отдельные свойства фона, которые не указаны, до их начального значения. Например, background: red; также сбросит любые ранее заданные background-image, background-position и прочие. Поэтому объявляйте сокращённое свойство первым, а переопределения (например, отдельный background-size) — после.

Порядок значений и специальные правила

Значения внутри background могут следовать почти в любом порядке, однако есть два важных правила:

background-size должен следовать за background-position, отделённый косой чертой (/). Например: background: url(bg.png) center / cover; — center — это позиция, а cover — размер.
При наложении нескольких фоновых изображений background-color должен идти последним, только в финальном слое, поскольку цвет рисуется позади всех изображений.

Начальное значение	Смотрите отдельные свойства.
Применяется к	Всем элементам. Также применяется к ::first-letter.
Наследуется	Нет.
Анимируется	Да. background-color, background-position и background-size поддерживают анимацию.
Версия	CSS1+ новые свойства в CSS3
DOM Syntax	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 property example</h2>
    <p>Here the background color is set to green.</p>
  </body>
</html>

Попробуйте сами »

Результат

![Свойство CSS background](/uploads/media/default/0001/03/5774b8353b8a0b810579a25a3cdcc2580213b1ff.png "CSS background property result" =420x)

Использование фонового изображения

Можно передать url() в сокращённое свойство, чтобы отрисовать изображение в качестве фона.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here a background image is used.</p>
  </body>
</html>

Попробуйте сами »

Совмещение нескольких значений

В этом примере цвет, изображение, поведение повторения, фиксация и позиция задаются одним объявлением. Изображение расположено по центру, не повторяется и зафиксировано при прокрутке страницы.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #ccc url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png") no-repeat fixed center;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>In this example background property specifies the background-color, the background-image property to set the image to the background, background-repeat to specify the image to be non repeated, background-attachment to specify the image to be fixed and background-position to specify the image to be in center.</p>
  </body>
</html>

Попробуйте сами »

Задание размера фона

Поскольку background-size нельзя совместить с остальными значениями сокращённого свойства без косой черты, нередко удобнее задать его отдельной строкой после сокращённой записи. Здесь cover масштабирует изображение так, чтобы оно заполнило весь элемент.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #eee url("/uploads/media/default/0001/01/4982c4f43023330a662b9baed5a407e391ae6161.jpeg") no-repeat center 100px;
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here the size for the background is set to cover.</p>
  </body>
</html>

Попробуйте сами »

Обрезка фона

Свойство background-clip управляет тем, как далеко фон рисуется внутри элемента. При значении padding-box фон останавливается у внутреннего края границы, поэтому он не просвечивает сквозь пунктирную или штриховую рамку.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 8px dotted #ccc;
        padding: 25px;
        background: #ccc;
        background-clip: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <div>
      <p>The background-clip for this div element is set to padding-box.</p>
    </div>
  </body>
</html>

Попробуйте сами »

Позиционирование начальной точки фона

Свойство background-origin задаёт область, относительно которой позиционируется изображение. При значении padding-box (по умолчанию) изображение начинается от внутреннего края границы.

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border: 10px double #ccc;
        padding: 25px;
        background: url("https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png");
        background-repeat: no-repeat;
        background-origin: padding-box;
      }
    </style>
  </head>
  <body>
    <h2>Background property example</h2>
    <p>Here background-origin: padding-box (default) is set.</p>
    <div></div>
  </body>
</html>

Попробуйте сами »

Значения

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

Связанные свойства

Если нужен более тонкий контроль, используйте отдельные полные свойства:

Практика

Какие из перечисленных являются свойствами CSS background?

Background-colorBackground-imageBackground-repeatBackground-positionOpacity