CSS background-image Свойство
Пример
Задайте фоновое изображение для элемента <BODY>:
body {
background-image: url("paper.gif");
background-color: #cccccc;
}
Пример
Установите два фоновых изображения для элемента <BODY>:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-color: #cccccc;
}
Подробнее примеры ниже.
Определение и использование
Свойство background-image задает одно или несколько фоновых изображений для элемента.
По умолчанию фоновое изображение помещается в верхний левый угол элемента и повторяется как по вертикали, так и по горизонтали.
Совет: Фон элемента — это общий размер элемента, включая отступы и границы (но не поля).
Совет: Всегда задается фоновый цвет , который будет использоваться, если изображение недоступно.
| Значение по умолчанию: | none |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS1 + new values in CSS3 |
| Синтаксис JavaScript: | object.style.backgroundImage="url(img_tree.gif)" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: IE8 и ранее не поддерживают несколько фоновых изображений.
Синтаксис CSS
background-image: url|none|initial|inherit;
Значения свойств
| Значение | Описание |
|---|---|
| url('URL') | URL-адрес изображения. Чтобы указать более одного изображения, разделите URL-адреса запятой |
| none | Фоновое изображение не будет отображаться. Это значение по умолчанию |
| linear-gradient() | Задает линейный градиент в качестве фонового изображения. Определите по крайней мере два цвета (сверху вниз) |
| radial-gradient() | Задает радиальный градиент в качестве фонового изображения. Определите по крайней мере два цвета (по центру к кромкам) |
| repeating-linear-gradient() | Повторяет линейный градиент |
| repeating-radial-gradient() | Повторяет радиальный градиент |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Другие примеры
Пример
Задает два фоновых изображения для элемента < BODY >. Пусть первое изображение появляется только один раз (без повторения), и пусть второе изображение повторяется:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Пример
Задает линейный градиент (два цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow);
}
Пример
Задает линейный градиент (три цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
linear-gradient(red, yellow, green);
}
Пример
Функция повторения-линейного градиента используется для повторения линейных градиентов:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Пример
Задает радиальный градиент (два цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow);
}
Пример
Задает радиальный градиент (три цвета) в качестве фонового изображения для элемента <div>:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
radial-gradient(red, yellow, green);
}
Пример
Функция повторения-радиального градиента () используется для повторения радиальных градиентов:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Похожие страницы
CSS Справочник: CSS Background, CSS Backgrounds (Дополнительный), CSS Градиенты
HTML DOM Справочник: backgroundImage Свойство