Свойство CSS background

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

Браузеры для ПК
Internet Explorer Chrome Opera Safari Firefox Edge
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 12+
Браузеры для планшетов и мобильных устройств
Android webview Chrome для Android Edge Mobile Firefox для Android Opera для Android iOS Safari Samsung Internet
Да Да Да Да Да Да Да

Краткая информация

Значение по умолчанию -
Наследуется Нет
Применяется Ко всем элементам
Аналог HTML Нет
Реализация в javascript
document.getElementById('idElement').style.background = 'red';
в данном случае элементу с id='idElement' будет добавлен стиль
border-left-color:red;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background:red;">...</div>
Реализация в jQuery
$('#idElement').css('background','red);
в данном случае элементу с id='idElement' будет добавлен стиль
background:red;
Результат будет следующий, допустим id='idElement' имеет тег div, тогда:
<div id="idElement" style="background:red;">...</div>

Поддерживающие версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Устанавливает параметры фона элемента и может объявить все параметры фонового стиля сразу, а именно: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size и background-attachment.

В случае если какое-либо свойство не будет объявлено элементу, то опущенные значения будут установлены по умолчанию.

Синтаксис

CSS1 - CSS2.1background: [background-clip || background-color || background-image || background-origin || background-position || background-repeat ||background-size || background-attachment];

CSS3background: [background-clip || background-color || background-image || background-origin || background-position || background-repeat ||background-size || background-attachment],*;

Например:

... background: left 5% / 15% 60% repeat-x url("star.png"); или background: center / contain no-repeat url("logo.svg"), #eee 35% url("zard.png"); ...

Значения

background-clip

Определяет как фоновая заливка или изображение должны отображаться под границами элемента.

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

Пример

background:#dfff2f;
background:red content-box radial-gradient(crimson, skyblue);
background:left 5% / 15% 60% repeat-x url(/img/fon/bg1.jpg);
background:center / contain no-repeat url(/img/fon/bg2.png),#eee 35% url(/img/fon/bg1.jpg);

Результат

В этом блоке показан пример использования свойства background:#dfff2f;.