Свойство background
Пример style.background
Стиль фона документа:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Попробуйте сами »
Ещё примеры ниже.
Описание background
Свойство background устанавливает или возвращает до восьми отдельных свойств фона в сокращенной форме.
С помощью этого свойства вы можете установить/вернуть одно или несколько из следующих (в любом порядке):
| DOM Свойства | CSS Свойства |
|---|---|
| backgroundAttachment | background-attachment |
| backgroundClip | background-clip |
| backgroundColor | background-color |
| backgroundImage | background-image |
| backgroundOrigin | background-origin |
| backgroundPosition | background-position |
| backgroundRepeat | background-repeat |
| backgroundSize | background-size |
Свойства выше также могут быть установлены с помощью отдельных свойств стиля. Использование отдельных свойств настоятельно рекомендуется для непродвинутых авторов для лучшей управляемости.
Похожи на background
HTML Стили: Свойство background
CSS Учебник: CSS Backgrounds
CSS3 Учебник: CSS3 Backgrounds
CSS Справочник: Свойство background
Синтаксис background
Вернуть свойство background:
object.style.background
Установите свойство background:
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
Значение свойства background
| Значение | Описание |
|---|---|
| attachment | Устанавливает, будет ли фоновое изображение фиксированным или прокручиваемым |
| clip | Устанавливает область закрашивания фонового изображения |
| color | Устанавливает цвет фона элемента |
| image | Устанавливает фоновое изображение для элемента |
| origin | Устанавливает область позиционирования фона |
| position | Устанавливает начальную позицию фонового изображения |
| repeat | Устанавливает, как будет повторяться фоновое изображение. |
| size | Устанавливает размер фонового изображения |
| initial | Устанавливает это свойство в значение по умолчанию. Читайте о initial |
| inherit | Наследует это свойство от родительского элемента. Читайте о inherit |
Технические детали background
| Значение по умолчанию: | transparent none repeat scroll 0% 0% auto padding-box border-box |
|---|---|
| Возвращаемое значение: | Строка, представляющая фон элемента. |
| CSS Версия | CSS1 |
Поддержка background
style.background является функцией CSS1 (1996).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |
Примечание background
В CSS3 (1999) было добавлено 3 новых свойства:
- background-clip
- background-origin
- background-size
Ещё примеры background
Измените фон элемента DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Попробуйте сами »
Установить фоновое изображение для документа:
document.body.style.backgroundImage = "url('img_tree.png')";
Попробуйте сами »
Установить фоновое изображение так, чтобы оно не повторялось:
document.body.style.backgroundRepeat = "repeat-y";
Попробуйте сами »
Установите свойство background-image to be fixed (will not scroll):
document.body.style.backgroundAttachment = "fixed";
Попробуйте сами »
Измените положение фонового изображения:
document.body.style.backgroundPosition = "top right";
Попробуйте сами »