Свойство background-image используется для задания фонового изображения элемента.
Если при этом для элемента задан еще и фоновый цвет, то он будет виден, пока фоновое изображение не загрузится.
Это свойство применимо ко всем элементам.
Значение свойства background-image
- url – указывается адрес файла с изображением. Абсолютный или относительный путь к файлу (подробнее здесь...),
- none - указывает на отсутствие фонового изображения,
- inherit - принимает значение свойства родительского элемента.
Значение по умолчанию
- none
Пример
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-image </title>
<style type="text/css">
h1 {background-image: url(img/oblaka.jpg); height:200px; width:700px; margin:5px}
p {background-image: url(img/peng_128.gif); height:150px; width:700px}
</style>
</head>
<body>
<h1> Я выбрал небо в качестве фонового изображения для заголовков первого уровня. </h1>
<p> Для абзацев фоновым изображением является пингвин. </p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> Свойство background-image </title>
<style type="text/css">
h1 {background-image: url(img/oblaka.jpg); height:200px; width:700px; margin:5px}
p {background-image: url(img/peng_128.gif); height:150px; width:700px}
</style>
</head>
<body>
<h1> Я выбрал небо в качестве фонового изображения для заголовков первого уровня. </h1>
<p> Для абзацев фоновым изображением является пингвин. </p>
</body>
</html>
Результат
