Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Цвет и фон : background-image

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

Атрибут background-image | Свойство backgroundImage

Это свойство задает фоновое изображение для объекта.

Синтаксис

HTML { background-image : sLocation }
Скрипты [ sLocation = ] object.style.backgroundImage

Возможные значения

sLocation
Строка, которое может определять и принимать одно из следующих значений:
none Значение по умолчанию. Фоновым цветом объекта становится цвет его родительского элемента.
url(sUrl) Определяет путь до изображения. Он может быть относительный (URL) или абсолютный (sUrl).
-moz-linear-gradient
-moz-repeating-linear-gradient
-moz-radial-gradient
-moz-repeating-radial-gradient

Значением по умолчанию является none. Свойство не наследуется.

Замечания

URL однозначно определяет путь до изображения.

При этом наряду с картинкой, желательно задать еще и фоновый цвет. Он будет отображаться, пока графический файл не загрузится или, например, если отключен показ изображений в браузере, или если на изображении есть прозрачные области. Когда картинка загрузится, оно автоматически перекроет фоновый цвет.

Значение этого свойства можно задать в составном свойстве (background).

Примеры

Следующие примеры иллюстрируют применение свойства backgroundImage и атрибута background-image.

В первом примере используется атрибут background-image, чтобы показывать фоновое изображение (при наведении курсора мыши на объект) или скрывать его (курсор мыши "уходит" с объекта).

<style type="text/css">
.setUrl {
    background-image: url(sphere.jpg);
}
.loseUrl {
    background-image: url(none);
}
</style>
</head>

<body>

<span style="font-size: 14px" onmouseover="this.className='setUrl'" onmouseout="this.className='loseUrl'">
. . . </span>

Во втором примере используется свойство backgroundImage, чтобы показывать или скрывать фоновое изображение.

<span onmouseover="this.style.backgroundImage='url(sphere.jpeg)'">
. . . </span>

Стандарты

Это свойство определено в Cascading Style Sheets (CSS), Level 1 (CSS1)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530717(VS.85).aspx

https://developer.mozilla.org/en/CSS/background-image

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования