background-image
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Частично |
|
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS
Значение по умолчанию
Наследуется
Применяется
Аналог HTML
Ссылка на спецификацию
CSS1
none
Нет Ко всем элементам
<body background="URL">
http://www.w3.org/TR/CSS21/colors.html#propdef-background- image
Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет.
Синтаксис
background-image: url(путь к файлу) | none | inherit
Значения
url |
В качестве значения используется путь к графическому файлу, который указывается внутри |
|
конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или |
|
одинарных), так и без них. |
none |
Отменяет фоновое изображение для элемента. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>background-image</title>
<style type="text/css"> BODY {
background-image: url('images/bg.gif'); /* Путь к фоновому изображению */ background-color: #fc0; /* Цвет фона */
}
</style>
</head>
<body> <p>...</p>
</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.backgroundImage
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
background-position
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Частично |
|
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS1, CSS2.1 |
|
|
|
|
Значение по |
0% 0% |
|
умолчанию |
||
|
||
|
Нет |
|
Наследуется |
||
|
К блочным элементам |
|
Применяется |
||
|
Нет |
|
Аналог HTML |
||
|
http://www.w3.org/TR/CSS21/colors.html#propdef-background- |
|
Ссылка на |
||
спецификацию |
position |
|
|
|
Описание
Задает начальное положение фонового изображения, установленного с помощью свойства backgroundimage.
Синтаксис
background-position: [left | center | right | проценты | значение] || [top | center | bottom | проценты | значение] | inherit
Значения
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевыхслов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
Вскобках указано, где располагается фоновый рисунок относительно контейнера.
При inherit значение наследуется у родителя элемента.
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>background-position</title>
<style type="text/css"> BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */ background-position: right bottom; /* Положение фона */ background-repeat: no-repeat; /* Отменяем повторение фона */
}
</style>
</head>
<body> <p>...</p>
</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.backgroundPosition
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.
background-repeat
|
Internet Explorer |
|
|
|
Netscape |
|
|
Opera |
|
|
|
Safari |
|
|
|
Firefox |
|
||
6.0 |
7.0 |
8.0 |
8.0 |
9.0 |
8.0 |
9.2 |
9.5 |
1.3 |
2.0 |
3.1 |
1.5 |
2.0 |
3.0 |
||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Частично |
|
Частично |
Да |
|
Да |
|
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
Да |
Да |
Да |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Краткая информация
CSS |
CSS1 |
|
|
|
|
Значение по |
repeat |
|
умолчанию |
||
|
||
|
Нет |
|
Наследуется |
||
|
Ко всем элементам |
|
Применяется |
||
|
Нет |
|
Аналог HTML |
||
|
http://www.w3.org/TR/CSS21/colors.html#propdef-background- |
|
Ссылка на |
||
спецификацию |
repeat |
|
|
|
Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства backgroundimage. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны.
Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
Значения
no-repeat |
Устанавливает одно фоновое изображение в элементе без его повторений, положение |
|
которого определяется свойством background-position (по умолчанию в левом верхнем углу). |
repeat |
Фоновое изображение повторяется по горизонтали и вертикали. |
repeat-x |
Фоновый рисунок повторяется только по горизонтали. |
repeat-y |
Фоновый рисунок повторяется только по вертикали. |
inherit |
Наследует значение родителя. |
Пример
HTML 4.01 CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>background-repeat</title>
<style type="text/css"> BODY {
background-image: url('mybg.gif'); /* Путь к фоновому рисунку */ background-position: right bottom; /* Положение фона */ background-repeat: repeat-y; /* Повторяем фон по вертикали */
}
</style>
</head>
<body> <p>...</p>
</body>
</html>
Объектная модель
[window.]document.getElementById("elementID").style.backgroundRepeat
Браузеры
Internet Explorer до седьмой версии включительно не поддерживает значение inherit.