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

CSS свойства

Определение и применение

CSS свойство background-position задает положение (позицию) фонового изображения. По умолчанию, фоновое изображение размещается в верхнем левом углу элемента и повторяется по вертикали и горизонтали.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
background-position1.01.03.51.04.012.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.backgroundPosition="center"

Значения свойства

ЗначениеОписание
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%.
x yЗадает положение изображения. Первое значение-горизонтальное положение, а второе значение вертикальное. Левый верхний угол имеет 0 0. Значения могут быть в пикселях, или других единицах измерения CSS. Если указано только одно значение, то другое значение будет 50%. Вы можете совместно использовать проценты и единицы измерения.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-position </title>
<style> 
.primer {
background-image:url("smile.png"); /* задаём изображение для заднего фона */
background-position:center; /* задаём положение изображения */
background-repeat:repeat-y; /* повторяем изображение вертикально */
background-color:khaki; /* задаём цвет заднего фона */
height:300px; 
width:300px;
}
</style>
</head>
	<body>
		<div class = "primer"></div>
	</body>
</html>
Пример использования свойства background-position.
Пример использования свойства background-position.
CSS свойства