Свойство CSS background-image
Свойство background-image задаёт фоновые изображения для элементов. Можно указать одно или несколько изображений.
По умолчанию фоновое изображение повторяется по вертикали и горизонтали и размещается в верхнем левом углу элемента.
Фон элемента занимает весь размер, включая отступы и рамку (но не внешний отступ).
Если изображение недоступно, необходимо указать цвет фона.
| Начальное значение | none |
|---|---|
| Применяется к | Всем элементам. Также применяется к ::first-letter и ::first-line. |
| Наследуется | Нет. |
| Анимация | Нет. |
| Версия | CSS1 + некоторые новые значения в CSS3 |
| Синтаксис DOM | object.style.backgroundImage = "url(img_tree.png)"; |
Синтаксис
Синтаксис свойства CSS background-image
background-image: url | none | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient | initial | inherit;Пример свойства background-image:
Пример свойства CSS background-image
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>Hello World!</p>
</body>
</html>Результат
См. другой пример, где используются два изображения, и они задаются с помощью свойства background-position.
Пример свойства background-image с другими свойствами фона:
Пример свойства CSS background-image с 2 изображениями
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
body {
padding: 100px;
background-image: url("https://ru.w3docs.com/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("https://ru.w3docs.com/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-attachment: fixed;
background-position: 5px 50px;
background-repeat: no-repeat, repeat;
}
</style>
</head>
<body>
<h2>Background-image property example</h2>
<p>The background image is positioned 5px from the left, and 50px down from the top.</p>
</body>
</html>В этом примере в качестве фонового изображения для элемента <div> указан «linear-gradient» с двумя цветами:
Пример свойства background-image со значением «linear-gradient»:
Пример свойства CSS background-image со значением linear-gradient
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 300px;
background-image: linear-gradient(#eee, #1c87c9);
}
</style>
</head>
<body>
<h2>Linear gradient as a background image example</h2>
<p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
<div></div>
</body>
</html>Пример свойства background-image со значением «repeating-radial-gradient»:
Пример свойства CSS background-image со значением repeating-radial-gradient
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
height: 300px;
background-color: #cccccc;
background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
}
</style>
</head>
<body>
<h2>Radial gradient as a background image example</h2>
<div></div>
</body>
</html>Значения
| Значение | Описание |
|---|---|
| url | Определяет URL-адрес изображения. Можно указать несколько изображений, разделённых запятыми. |
| none | Фоновое изображение отсутствует. Это значение по умолчанию. |
| linear-gradient | В качестве фонового изображения указан линейный градиент. |
| radial-gradient | В качестве фонового изображения указан радиальный градиент. |
| repeating-linear-gradient | Повторяет линейный градиент. |
| repeating-radial-gradient | Повторяет радиальный градиент. |
| initial | Устанавливает свойству значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
Какие свойства CSS можно использовать для управления фоновым изображением элемента?