Свойство background-position устанавливает местоположение фоновой картинки. При этом свойству обычно присваивается пара значений - для определения горизонтального и вертикального положений. Например:
Code
body {
background-position: 30% 45%;
background-image: url('images/back.gif');
background-repeat: no-repeat;
}
В данном случае картинка будет расположена на расстоянии 30% слева по горизонтали и 45% сверху по вертикали. Вообще, если указана пара значений, то первое обычно применяется к горизонтальному положению, второе - к вертикальному.
Если дано только одно значение, то оно применяется к горизонтальному положению, при этом вертикальное будет равно 50% (посередине).
При указании значений, кроме процентов можно использовать ключевые слова, принятые в CSS меры длины и их комбинации.
Пример
Code
a.elink {
background-image: url('images/elink.gif');
background-repeat: no-repeat;
background-position: right 4px;
}
Местоположение фоновой картинки отсчитывается от внутренней стороны рамки (border) элемента.
Пример
Code
a.external {
padding-right: 16px;
background-image: url('images/arrow.gif');
background-repeat: no-repeat;
background-position: right;
}
Возможные значения
процент% процент%
Первое значение определяет положение по горизонтали, второе - по вертикали. Например, 0% 0% - верхний левый угол. 100% 100% - правый нижний.
процент%
Горизонтальное положение картинки в процентах от 0% до 100%. Вертикальное значение будет равным 50% (=посередине).
расстояние расстояние
Указывает местоположение (по горизонтали и вертикали соответственно) с использованием принятых в CSS способов задания размеров.
расстояние
Горизонтальное положение картинки, указанное одним из принятых в CSS способов задания размеров. Вертикальное значение будет равным 50% (=посередине).
left top
Верхний левый угол - то же самое, что 0% 0% или top left.
top
Посередине, наверху. То же самое, что и 50% 0%, top center, center top.
right top
Верхний правый угол. То же самое, что и 100% 0%, top right.
left
Слева, посередине. То же самое, что и 0% 50%, left center, center left.
center
В центре. То же самое, что и 50% 50%, center center.
right
Справа, посередине. То же, что и 100% 50%, right center, center right.
left bottom
Левый нижний угол. То же самое, что и 0% 100%, bottom left.
bottom
Посередине, внизу. То же, что и 50% 100%, center bottom, bottom center.
right bottom
Правый нижний угол. То же самое, что и 100% 100%, bottom right.
inherit
Заимствует значение свойства у родительского элемента.
