Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Цвет и фон : background-position
Материал из Справочник Web-языков.
Содержание |
[править] Атрибут background-position | Свойство backgroundPosition
C помощью этого свойства задается положение фонового изображения, установленного с помощью background-image.
[править] Синтаксис
| HTML | { background-position : sPosition } |
| Скрипты | [ sPosition = ] object.style.backgroundPosition |
[править] Возможные значения
- sPosition
- Строка, которое может определять и принимать одно или два из следующих значений:
length Задается вещественным числом в абсолютных (cm, mm, in, pt, или pc) или относительных (em, ex, или px) единицах измерения. percentage Задается целым числом в процентах (%). Процентное значение высчитывается от ширины или высоты объекта. vAlignment Значение вертикального выравнивания. Может принимать одно из следующих значений: top - вертикальное выравнивание по верхнему краю, center - вертикальное выравнивание по центру и bottom - вертикальное выравнивание по нижнему краю. hAlignment Значение горизонтального выравнивания. Может принимать одно из следующих значений: left - горизонтальное выравнивание по левому краю, center - горизонтальное выравнивание по центру и right - горизонтальное выравнивание по правому краю.
Значением по умолчанию является 0% 0%. Свойство не наследуется.
[править] Замечания
Если для свойства задано только одно значение, то оно применяется для горизонтального выравнивания, а для вертикального выравнивание по умолчанию присваивается значение 50%. Если заданы два значения, то первое значение определено для горизонтального выравнивания, а второе - для вертикального.
При значении 0% 0% (начальное значение) фоновый рисунок (backgroundImage) отображается в левом верхнем углу блока элемента, включая отступ (padding).
Если задать положение изображения в пикселях, то левый верхний край рисунка переместиться в точку с указанными координатами x и y. Когда значение координат будет увеличиваться, изображение будет перемещаться вправо и вниз по осям координат в видимой области экрана. При задании местоположения в процентах используются опорные точки изображения, например, при значениях 50% 50% рисунок эффективно перемещается в центр видимой области.
Значение этого свойства можно задать в составном свойстве (background).
[править] Примеры
Следующие примеры иллюстрируют применение свойства backgroundPosition и атрибута background-position.
В первом примере используется атрибут background-position для задания положения фонового изображения.
<STYLE>
.style1 { background-position:top center }
.style2 { background-position:bottom right }
</STYLE>
</HEAD>
<BODY onload="oSpan.className='style1'">
<SPAN STYLE="font-size:14; width:250;" ID="oSpan"
onmouseover="this.className='style2'" onmouseout="this.className='style1'">
. . . </SPAN>
Во втором примере используется свойство backgroundPosition, чтобы при наведении курсора мыши на объект, фоновое изображение перемещалось в правый нижний угол.
<SPAN onmouseover="this.style.backgroundPosition='bottom right'">
[править] Стандарты
Это свойство определено в
[править] Поддерживаемые браузеры
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
[править] Ссылки на источники
