Свойство style 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

Эти свойства также можно установить с помощью отдельных стилевых свойств. Категорически рекомендуется использовать отдельные свойства для неопытных авторов для получения лучшего контроля.

См. также:

Урок CSS3:Фон CSS

Урок CSS3:Фон CSS3

Руководство CSS:Атрибут background

Пример

Установить стиль фона документа:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Попробуйте сами

Ниже страницы есть больше примеров TIY.

Синтаксис

Возврат атрибута background:

object.style.background

Установить атрибут background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Значение атрибута

Значение Описание
color Установить цвет фона элемента.
image Установить фоновое изображение элемента.
repeat Установить способ повторения фонового изображения.
attachment Установить, является ли фоновое изображение фиксированным или滚动的.
position Установить начальную позицию фонового изображения.
size Установить размер фонового изображения.
origin Установить область позиционирования фона.
clip Установить область рисования фонового изображения.
initial Установить этот атрибут в его значение по умолчанию. См. initial.
inherit Инheritировать этот атрибут от родительского элемента. См. inherit.

Технические детали

Значение по умолчанию: прозрачный none repeat scroll 0% 0% auto padding-box border-box
Возвратное значение: Строка, представляющая фоновый цвет элемента.
Версия CSS: CSS1 + новые свойства в CSS3

Более примеров

Пример 2

Изменение фона DIV элемента:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Попробуйте сами

Пример 3

Установить цвет фона для документа:

document.body.style.backgroundColor = "red";

Попробуйте сами

Пример 4

Установить фоновое изображение для документа:

document.body.style.backgroundImage = "url('img_tree.png')";

Попробуйте сами

Пример 5

Установить фоновое изображение как не повторяющееся:

document.body.style.backgroundRepeat = "repeat-y";

Попробуйте сами

Пример 6

Установить фоновое изображение как фиксированное (не будет скролиться):

document.body.style.backgroundAttachment = "fixed";

Попробуйте сами

Пример 7

Изменить положение фонового изображения:

document.body.style.backgroundPosition = "top right";

Попробуйте сами

Пример 8

Вернуть значение свойства фона документа:

document.body.style.background;

Попробуйте сами

Поддержка браузеров

background Это функция CSS1 (1996).

Все браузеры полностью поддерживают его:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка

Комментарии

В CSS3 (1999) добавлены три новых свойства: