СSS Свойство background
Пример
Установить различные свойства фона в одном объявлении:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Редактор кода »
Определение и использование
Свойство background это сокращенное свойство для:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Это не имеет значения, если одно из значений выше отсутствуют, например: background:#ff0000 url(smiley.gif); допускается.
| Значение по умолчанию: | см. раздел отдельные свойства |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да, см. раздел отдельные свойства. Прочитать о animatable Редактор кода |
| Версия: | CSS1 + новые свойства в CSS3 |
| JavaScript синтаксис: | object.style.background="red url(smiley.gif) top left no-repeat" Редактор кода |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: Internet Explorer 8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.
Примечание: См. раздел индивидуальная поддержка браузера для каждого значения ниже.
CSS Синтаксис
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Примечание: Если одно из свойств в сокращенном объявлении является свойством bg-size, вы должны использовать / (косую черту), чтобы отделить его от свойства bg-position, например: background:url(smiley.gif) 10px 20px/50px 50px; в результате получится фоновое изображение, расположенное на 10 пикселей слева, на 20 пикселей сверху, а размер изображения составит 50 пикселей в ширину и 50 пикселей в высоту.
Примечание: Если используется несколько источников фонового изображения, то также требуется цвет фона, параметр background-color должен быть последним в списке.
Значение свойств
| Значение | Описание | CSS |
|---|---|---|
| background-color | Задает используемый цвет фона | 1 |
| background-image | задает одно или несколько фоновых изображений для использования | 1 |
| background-position | Задает положение фоновых изображений | 1 |
| background-size | Задает размер фоновых изображений | 3 |
| background-repeat | Указывает, как повторять фоновые изображения | 1 |
| background-origin | Задает область позиционирования фоновых изображений | 3 |
| background-clip | Задает область рисования фоновых изображений | 3 |
| background-attachment | Указывает, являются ли фоновые изображения фиксированными или прокручиваются вместе с остальной частью страницы | 1 |
| initial | Задает этому свойству значение индекса. Прочитать о initial | 3 |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit | 2 |
Связанные страницы
CSS учебник: CSS Background, CSS Backgrounds (прогрессивный)
HTML DOM справочник: Свойство background
