background-image

Описание

Свойство CSS background-image позволяет установить в качестве фона элемента изображение. Если для элемента также задан цвет фона, то фоновое изображение накладывается поверх фонового цвета. До загрузки изображения, а также в случае отключения загрузки изображений в браузере будет отображаться фоновый цвет. Исли изображение имеет прозрачные области, сквозь них будет просматриваться фоновый цвет. Если изображение не может быть отрисовано (например, из-за недоступности URL), браузеры принимают это как отсутствие значения.

background-image
Значения: url(путь к файлу) | none | inherit
Начальное значение: none
Область применения: все элементы
Наследование: нет
Поддержка браузерами: основные значения Internet Explorer 4+, Chrome 1+, Opera 3.5+, Safari 1+, Firefox 1+, Android +, iOS +
Поддержка браузерами: многослойные фоны Internet Explorer 9+, Chrome 1+, Opera 3.5+, Safari 1.3+, Firefox 3.6+, Android +, iOS +
Поддержка браузерами: градиенты Internet Explorer 10+ (-ms), Chrome 1+ (-webkit), Opera 11+ (-o), Safari 4+ (-webkit), Firefox 3.6+ (-moz), Android + (-webkit), iOS + (-webkit)
Поддержка браузерами: SVG изображения Internet Explorer 9+, Chrome 8+, Opera 9.5+, Safari 5+, Firefox +, iOS +
Версия CSS: CSS1, CSS2, CSS2.1, CSS 3
Синтаксис JavaScript object.style.backgroundImage="url(img.jpg)"
Примечание:

background-image поддерживают все современные браузеры.
В спецификации CSS3 свойство background-image поддерживает многослойные фоны.
По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется по вертикали и горизонтали.

Совет: всегда устанавливайте фоновый цвет который будет использоваться в случае недоступности фонового изображения.

Синтаксис

background-image: background-image[, background-image]*

где background-image — одно из поддерживающихся значений.

Значения

Свойство background-image может принимать следующие значения:

url(‘URL’)
Ссылка (‘URL’) на изображение. Поддерживающтся как абсолютные так и относительные пути
none
Фоновое изображение не отображается. Значение по умолчанию для свойства background-image
inherit
Наследует значение родительского элемента
Значение inherit не поддерживает IE7 и более старые версии браузера.

Пример

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<style>
.box {
    width: 300px;
    height: 200px;
    background-image: url(img.jpg);
</style>
	<title>Свойство CSS background-image</title>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

Свойство background-image в спецификации CSS3 поддреживает многослойные фоны. В этом случае для всех изображений устанавливают значения свойства, разделяя их.

Пример

<!DOCTYPE HTML>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<style>
.box {
    width: 300px;
    height: 200px;
    background: url(img.jpg), url(img2.jpg);
</style>
	<title>Свойство CSS background-image</title>
</head>
<body>
	<div class="box">
	</div>
</body>
</html>

Комментирование запрещено.