CSS свойство background

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

CSS свойство background позволяет установить необходимые свойства фона в одном объявлении (универсальное свойство). Большинство компонентов можно переставлять, но размер следует после позиции через /, области записываются в порядке origin clip, а цвет разрешён только в последнем слое. Пропущенные компоненты сбрасываются к начальным значениям.

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

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

Создать многослойный градиентный фон и получить CSS можно в генераторе градиентов.

Попробуйте значения background

background задаёт несколько параметров фона одним объявлением. Сравните сплошной цвет, градиент и одиночную плитку на белом фоне. none сбрасывает фоновое изображение и цвет.

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

background: #ffe4bd

HTML и CSS примера
HTML
<div class="demo-target">
  <strong>Карточка</strong>
  <p>Текст помогает увидеть цвет и фон элемента.</p>
</div>
CSS
.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-height: 180px;
  padding: 24px;
  border: 3px solid #245a85;
  border-radius: 8px;
  color: #172c3d;
  background-color: #d9edf8;
  font: 18px/1.5 system-ui;
  background: #ffe4bd;
}

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

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

Отдельные значения (6) поддерживаются не везде — смотрите таблицу.

Показать браузеры
Совместимостьcss.properties.background
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
background✓1✓12✓1✓3.5✓1✓18✓4✓10.1✓1✓1.0✓2✓1
SVG-изображение как фон✓1✓12✓4✓9.5✓3.1✓18✓4✓10.1✓1✓1.0✓4.4✓1
background-clip✓21✓12✓22✓15✓5.1✓25✓22✓14✓4✓1.5✓3✓4
background-origin✓21✓12✓22✓15✓5.1✓25✓22✓14✓4✓1.5✓3✓4
background-size✓21✓12✓9✓21✓5.1✓25✓18✓14✓4✓1.5✓3✓4
border-area✓150✓150×✓134✓18.2✓150×✓101✓18.2×✓150✓18.2
border-box✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
bottom✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
center✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
content-box✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
currentColor✓1✓12✓1.5✓9.5✓4✓18✓4✓14✓3.2✓1.0✓37✓3.2
fixed✓≤15✓≤15✓≤50✓15✓≤9.1✓18✓≤50✓14✓≤9.3✓1.0✓4.4✓≤9.3
left✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
local✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
Несколько фонов✓1✓12✓3.6✓10.5✓1.3✓18✓4✓14✓1✓1.0✓2✓1
no-repeat✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
none✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
padding-box✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
repeat✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
repeat-x✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
repeat-y✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
right✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
round✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
scroll✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
space✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
text✓120✓120◐49✓106✓14✓120◐49✓80✓14✓25.0✓120✓14
top✓≤31✓≤15✓≤50✓≤18✓≤9.1✓≤31✓≤50✓≤18✓≤9.3✓≤2.0✓≤4.4.3✓≤9.3
transparent✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
x-end××××✓26×××✓26××✓26
x-start××××✓26×××✓26××✓26
y-end××××✓26×××✓26××✓26
y-start××××✓26×××✓26××✓26

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS
background: [ <bg-layer> , ]* <final-bg-layer>;

/* Глобальные значения */
background: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. Квадратные скобки группируют части записи. * — ноль или больше повторений; <bg-layer> — слой без цвета, <final-bg-layer> — последний слой, в котором разрешён цвет.

CSS
/* Состав обычного слоя */
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
             <repeat-style> || <attachment> || <visual-box> || <visual-box>

/* Последний слой может включать цвет */
<final-bg-layer> = <bg-layer> || <color>

|| допускает один или несколько компонентов, ? — необязательную часть. Типы соответствуют свойствам из таблицы ниже: изображение, позиция, размер, повторение, прокрутка, область и цвет. <visual-box> — border-box, padding-box или content-box. Два значения области задают сначала background-origin, затем background-clip; одно задаёт оба свойства. Например: background: url("image.png") center / cover no-repeat padding-box border-box #fff;.

JavaScript синтаксис:

JavaScript
element.style.background = "blue no-repeat";

Начальное значение свойства

  • background-color — transparent;
  • background-image — none;
  • background-position — 0% 0%;
  • background-size — auto;
  • background-repeat — repeat;
  • background-attachment — scroll;
  • background-origin — padding-box;
  • background-clip — border-box.

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

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

Слои и сброс значений

Слои разделяются запятыми, первый рисуется сверху; цвет лежит под всеми изображениями. Глобальное значение применяется ко всему сокращённому свойству и не смешивается с компонентами. Например, background: #fff одновременно удаляет прежние фоновые изображения и сбрасывает их позицию, размер и остальные компоненты. background-blend-mode в сокращение не входит и не сбрасывается.

Начальные значения компонентов:

CSS
background-color: transparent;
background-image: none;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-origin: padding-box;
background-clip: border-box;
background-attachment: scroll;

Спецификация

CSS Backgrounds and Borders Module Level 3.

Сокращение появилось в CSS1; CSS3 добавил в него background-size, background-origin и background-clip.

Наследуется

Нет.

Анимируемое

Зависит от отдельных свойств: цвет, совместимые позиции и размеры меняются плавно; изображения и ключевые слова переключаются дискретно.

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

Сокращённая запись фона

Измените center на right bottom, а 64px на 100px. Размер после косой черты задаёт background-size; цвет виден вокруг изображения.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 16px;
}
h3 {
    font-size: 16px;
    margin: 0 0 8px;
}
section {
    min-width: 0;
    background: repeating-conic-gradient(#fff 0% 25%, #e1e7ed 0% 50%) 0 / 20px 20px;
}
.sample {
    min-height: 190px;
    border: 1px solid #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Результат</h3>
    <div class="sample"></div>
  </section>
</div>
style.css
CSS
.sample {
    background: #fff0cf url('assets/tile.svg') center / 64px 40px no-repeat;
}

Как сокращение сбрасывает настройки

Оба блока сначала получают одинаковый рисунок. В варианте A меняется только background-color, а в варианте B background сбрасывает изображение, размер, повторение и позицию. Замените background в правиле .shorthand на background-color — рисунок вернётся. Удалите последнее правило целиком, чтобы вернуть исходный фон варианту B.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
    background: #fff;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 24px;
}
section {
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.sample {
    min-height: 160px;
    outline: 2px solid #607589;
}
index.html
HTML
<div class="comparison">
  <section>
    <h3>Вариант A</h3>
    <div class="sample color-only"></div>
  </section>
  <section>
    <h3>Вариант B</h3>
    <div class="sample shorthand"></div>
  </section>
</div>
style.css
CSS
.sample {
    background-color: #edf4f8;
    background-image: linear-gradient(135deg, #245a85 50%, #ef803c 50%);
    background-size: 80px 80px;
    background-position: center;
    background-repeat: no-repeat;
}
/* Остальные свойства фона сохраняются. */
.color-only {
    background-color: #fff0cf;
}
/* Пропущенные компоненты возвращаются к начальным значениям. */
.shorthand {
    background: #fff0cf;
}