CSS :: Свойство background-image
css-свойство background-image (от англ. background image – фоновое изображение) используется для установки фонового изображения элемента. Если фоновых изображений указывается несколько, то приоритет будет отдаваться первым из них, т.е. изображения, указанные впереди, будут располагаться выше остальных в порядке своего перечисления в значении свойства. Если одновременно заданы background-color и background-image, то цветной фон будет отображаться до момента полной загрузки фонового изображения или вместо него из-за невозможности установки изображения в качестве фона элемента. Кроме того, если изображение будет иметь прозрачные фрагменты, через него будет просвечиваться и цвет обычного фона.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.backgroundImage="value".
Синтаксис
background-image: [url(<адрес>) | none]#
Значения
- url – путь к одному или нескольким файлам изображений, перечисляемых через запятую в формате {background-image: url("path_1"), url("path_2"), ...}, где адрес можно писать как в кавычках (двойных или одинарных), так и без них.
- none – фоновое изображение установлено не будет.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-image
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-image
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ padding: 1em; width: 300px; min-height: 50px; border: solid green 2px; } .background_1{ background-color: yellow; } .background_2{ background-color: #0000ff; background-image: url("images/balls_2015.jpg"); } </style> </head> <body> <p class="background_1"> Данный абзац имеет желтый фон. </p> <p class="background_2"> По умолчанию фоновое изображение располагается браузером в левом верхнем углу и затем повторяется по вертикали и горизонтали. Если изображение не будет загружено, то будет использован синий фон, заданный в свойстве background-color. </p> </body> </html>
Пример №1