Свойство фона CSS
Пример
Задайте разные свойства фона в одном объявлении:
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
Определение и использование
Свойство background
является сокращенным свойством для:
- фоновый цвет
- фоновая картинка
- фоновое положение
- размер фона
- фоновый повтор
- фон-происхождение
- фоновый клип
- фоновое вложение
Не имеет значения, если одно из указанных выше значений отсутствует, например, background:#ff0000 url(smiley.gif); разрешено.
Значение по умолчанию: | посмотреть отдельные свойства |
---|---|
Унаследовано: | нет |
Анимация: | да, см. отдельные свойства . Читать об анимации |
Версия: | CSS1 + новые свойства в CSS3 |
Синтаксис JavaScript: | object .style.background="красный URL(smiley.gif) вверху слева без повтора" |
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
Property | |||||
---|---|---|---|---|---|
background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание. См. поддержку отдельных браузеров для каждого значения ниже.
Синтаксис 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 пикселей в высоту.
Примечание. Если вы используете несколько источников фонового изображения, но также хотите задать цвет фона, параметр цвета фона должен быть последним в списке.
Значения свойств
Value | Description | CSS |
---|---|---|
background-color | Specifies the background color to be used | 1 |
background-image | Specifies ONE or MORE background images to be used | 1 |
background-position | Specifies the position of the background images | 1 |
background-size | Specifies the size of the background images | 3 |
background-repeat | Specifies how to repeat the background images | 1 |
background-origin | Specifies the positioning area of the background images | 3 |
background-clip | Specifies the painting area of the background images | 3 |
background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
initial | Sets this property to its default value. Read about initial | 3 |
inherit | Inherits this property from its parent element. Read about inherit | 2 |
Связанные страницы
Учебное пособие по CSS: фон CSS , фон CSS (дополнительно)
Справочник по HTML DOM: свойство background