Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

background

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

Тип свойства

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

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

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

Значения

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

background-color — цвет фона элемента.
background-image — устанавливает фоновое изображение.
background-repeat — разрешает или запрещает повторение (размножение) фонового изображения, если оно меньше размеров элемента.
background-attachment — определяет будет ли фоновое изображение фиксироваться или прокручиваться вместе с содержимым окна браузера.
background-position — позиционирование фонового изображения.
inherit — заставляет элемент наследовать значение 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" "https://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

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

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6.0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

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

Разделы сайта

CSS по алфавиту

CSS по назначению