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
CSS свойство background-image определяет одно или несколько фоновых изображений для элемента.
По умолчанию фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали.
Совет: Элемент background - это общий размер элемента, включая отступы и границу (но не поле).
Совет: Всегда устанавливайте background-color, который будет использоваться, если изображение недоступно.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS1 + new values in CSS3 |
| JavaScript синтаксис: | object.style.backgroundImage="url(img_tree.gif)" Попробуй |
Поддержка background-image
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Синтаксис background-image
background-image: url|none|initial|inherit;
Значения background-image
| Значение | Описание | Демонстрация |
|---|---|---|
| url('URL') | URL-адрес изображения. Чтобы указать более одного изображения, разделите URL-адрес запятой | Демо ❯ |
| none | Фоновое изображение отображаться не будет. Это значение по умолчанию | |
| conic-gradient() | Устанавливает конический градиент в качестве фонового изображения. Определите как минимум два цвета | Демо ❯ |
| linear-gradient() | Устанавливает линейный градиент в качестве фонового изображения. Определите как минимум два цвета (сверху вниз) | Демо ❯ |
| radial-gradient() | Устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра к краям) | Демо ❯ |
| repeating-conic-gradient() | Повторяет конический градиент | Демо ❯ |
| repeating-linear-gradient() | Повторяет линейный градиент | Демо ❯ |
| repeating-radial-gradient() | Повторяет радиальный градиент | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры background-image
Устанавливает два фоновых изображения для элемента <body>. Пусть первое изображение появляется только один раз (без повтора), а второе изображение повторяется:
body {
background-image: url("img_tree.gif"), url("paper.gif");
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}
Попробуйте сами »
Используйте различные свойства фона для создания изображения "hero":
.hero-image {
background-image: url("photographer.jpg"); /* Используемое
изображение */
background-color: #cccccc; /* Используется, если изображение
недоступно */
height: 500px; /* Вы должны установить указанную высоту */
background-position: center; /* Центрируйте изображение */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}
Попробуйте сами »
Устанавливает линейный градиент (два цвета) в качестве фонового изображения для элемента <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);
}
Попробуйте сами »
Функция repeating-linear-gradient() используется для повторения линейных градиентов:
#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);
}
Попробуйте сами »
Функция repeating-radial-gradient() используется для повторения радиальных градиентов:
#grad1 {
height: 200px;
background-color: #cccccc;
background-image:
repeating-radial-gradient(red, yellow 10%, green 20%);
}
Попробуйте сами »
Страницы по теме background-image
CSS Учебник: CSS Background, CSS Фон (продвинутый), CSS Градиенты
HTML DOM справочник: backgroundImage свойство