Вы здесь

CSS свойство background-position

Задает начальное положение фонового изображения в пределах содержащего его элемента. Значение может быть как одиночным (например, top), так и двойным (например, top right).

По умолчанию фоновое изображение располагается в верхнем левом углу элемента и повторяется по горизонтали и вертикали.

CSS синтаксис

background-position: значение;

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

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если используется одно ключевое слово, то вторым по умолчанию будет "center"
x% y% Первое значение - позиция по горизонтали, второе - по вертикали. Верхий левый угол имеет позицию 0% 0%. Нижний правый угол - 100% 100%. Если задается одно значение, то второе по умолчанию будет 50%. Значение по умолчанию: 0% 0%.
xpos ypos Первое значение - позиция по горизонтали, второе - по вертикали. Верхий левый угол имеет позицию 0 0. В качестве значений можно использовать пиксели (0px 0px), либо любые другие единицы измерения, допустимые в CSS. Если задается одно значение, то второе по умолчанию будет 50%. Допустимо совместное использование % и единиц расстояния.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример №1

Позиционирование фонового изображения


body { 
     background-image: url('smiley.gif');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center; 
}

Пример №2

Позиционирование фонового изображения при помощи процентов


body { 
     background-image: url('smiley.gif');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 30% 20%; 
}

Пример №3

Позиционирование фонового изображения при помощи пиксельных отступов


body { 
     background-image: url('smiley.gif');
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 50px 100px; 
}