CSS 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
Не имеет значения, если одно из приведенных выше значений отсутствует, например, фон: #ff0000 URL (smiley.gif); разрешено.
| Значение по умолчанию: | просмотреть отдельные свойства |
|---|---|
| Inherited: | no |
| Animatable: | Да, просмотреть отдельные свойства. Читайте о 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
Фон: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
Примечание: Если одно из свойств в сокращенном объявлении является свойством BG-size, необходимо использовать a/(косая черта), чтобы отделить его от свойства BG-Position, например Background: URL (смайлик. gif) 10px 20px/50px 50px; приведет к фоновому изображению, расположенному в 10 пикселов слева, 20 пикселям от верхнего, а размер изображения будет 50 пикселей в ширину и 50 пикселей высотой.
Примечание: Если используется несколько источников фонового изображения, но также требуется фоновый цвет, параметр фонового цвета должен быть последним в списке.
Значения свойств
| Значение | Описание | 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 (advanced)
HTML DOM Справочник: background Свойство