Стиль фона Свойство
Пример
Стиль фона документа:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Свойство background задает или возвращает до восьми отдельных свойств фона в сокращенной форме.
С помощью этого свойства вы можете установить/возвратить одно или несколько из следующих значений (в любом порядке):
- фоновый цвет
- фоновая картинка
- фоновый повтор
- фоновое вложение
- фоновое положение
- размер фона
- фон-происхождение
- фоновый клип
Вышеупомянутые свойства также могут быть установлены с помощью отдельных свойств стиля. Неопытным авторам настоятельно рекомендуется использовать отдельные свойства для лучшей управляемости.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание. См. поддержку отдельных браузеров для каждого значения ниже.
Синтаксис
Вернуть свойство фона:
object.style.background
Установите свойство фона:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Значения свойств
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Технические детали
| Значение по умолчанию: | прозрачный нет повтор прокрутки 0% 0% автоматический padding-box border-box |
|---|---|
| Возвращаемое значение: | Строка, представляющая фон элемента |
| CSS-версия | CSS1 + новые свойства в CSS3 |
Дополнительные примеры
Пример
Измените фон элемента DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Пример
Установите цвет фона для документа:
document.body.style.backgroundColor = "red";
Пример
Установите фоновое изображение для документа:
document.body.style.backgroundImage = "url('img_tree.png')";
Пример
Установите фоновое изображение без повтора:
document.body.style.backgroundRepeat = "repeat-y";
Пример
Установите фоновое изображение как фиксированное (не будет прокручиваться):
document.body.style.backgroundAttachment = "fixed";
Пример
Измените положение фонового изображения:
document.body.style.backgroundPosition = "top right";
Пример
Вернуть значения свойств фона документа:
document.body.style.background;
Связанные страницы
Учебное пособие по CSS: Фон CSS
Учебник по CSS3: Фоны CSS3
Справочник по CSS: свойство background