Свойство background-image задает фоновую картинку элементу.
Данное свойство входит в свойство-сокращение background.
См. все свойства для фона: background-attachment, background-color, background-image, background-position, background-repeat, background-size, background-origin, background-clip, background.
См. также тег img, с помощью которого можно сделать картинку в HTML коде.
Синтаксис
CSS 2.1
селектор {
background-image: url("путь к картинке");
}селектор {
background-image: none;
}селектор {
background-image: inherit;
}CSS 3
В CSS3 можно задавать несколько картинок одновременно, перечисляя их через запятую:
селектор {
background-image: url('путь к картинке1'), url('путь к картинке2'), url('путь к картинке3');
}Значения
| Значение | Описание |
|---|---|
| url | Путь к файлу с картинкой. Название картинки может быть в двойных кавычках, одинарных и вообще без кавычек. |
| none | Отменяет фоновую картинку для элемента. |
| inherit | Наследует значение родителя. |
Значение по умолчанию: none.
Примеры
Пример
В данном примере для body установлена фоновая картинка-узор. По умолчанию узор заполняет собой все окно браузера (хотя сама картинка узора имеет размер порядка 100 на 100 пикселей):
body {
background-image: url('bg.jpg');
}
#elem {
margin: 0px auto;
width: 500px;
text-align: justify;
font-weight: bold;
}