Справочник по 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'">

Стандарты

Это свойство определено в 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/ms530718(VS.85).aspx

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

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