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; 
}