Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

background

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

Тип свойства

Назначение: цвет и фон.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значение background — это значение inherit либо одно или несколько (разделенных пробелом) значений его следующих подсвойств:

Процентная запись: допустима только для background-position.

Значение по умолчанию: зависит от значений по умолчанию каждого подсвойства background.

Значения подсвойств допустимо указывать абсолютно в любом порядке — браузер сам определит, где и какое из них находится, а часть можно вообще не писать, тогда браузер использует их значения по умолчанию.

Если вы используете в качестве фона картинку, то обязательно указывайте и цвет, на тот случай, если в браузере отключен показ изображений.

Синтаксис

background: [background-color || background-image || background-repeat || background-attachment || background-position] | inherit

Пример CSS: использование background

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство background</title>
  <style type="text/css">
   div {
    height: 70px; /* высота блоков DIV */
    margin: 10px 0; /* размер внешних полей */
   }
   .div1 {
    background: #CCFF99 url('images/head1.png') no-repeat; /* цвет фона,
                                             адрес фонового изображения,
                                             запрет повторения */
   }
   .div2 {
    background-color: #CCFF99; /* цвет фона */
    background-image: url('images/head1.png'); /* адрес фонового изображения */
    background-repeat: no-repeat; /* запрет повторения */
   }
  </style>
 </head>
 <body>
  <div class="div1"></div>
  <div class="div2"></div>
 </body>
</html>

Результат примера

В этом примере для обоих блоков заданы абсолютно одинаковые стили по сути, но разные по форме записи. Как видите использовать background гораздо удобней, чем его подсвойства.

Результат. Использование свойства CSS background.

Использование свойства CSS background

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.