Свойство background-position

Свойството background-position задава позицията на фоновото изображение на елемент. Позицията може да се задава с помощта на всякакви единици за размери. Първата стойност обозначава отстъп отляво, втората - отстъп отгоре.

Може също да се задава позиция с ключови думи. В този случай редът на стойностите не има значение. Ключовите думи за вертикала: top, center, bottom. Ключовите думи за хоризонтала: left, center, right.

Как се използват ключовите думи

За да се позиционира изображение с ключова дума, трябва да се посочи една стойност за вертикалата и една за хоризонталата. Например, ако се посочи стойност top right, изображението ще бъде отгоре вдясно.

Редът на думите няма значение: може да се напише top right, а може и - right top. Ако има ключова дума center - тя може да се пропусне. Например, top center е същото като просто top. А center center е същото като просто center.

Синтаксис

селектор {
	background-position: две стойности разделени с интервал;
}

Пример

По подразбиране фоновото изображение ще бъде в горния ляв ъгъл:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение в горния десен ъгъл:

<div id="elem"></div>

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение в долния десен ъгъл:

<div id="elem"></div>

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение вдясно и по център вертикално:

<div id="elem"></div>

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение в центъра на блока:

<div id="elem"></div>

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение на разстояние 20px отляво и 40px отгоре:

<div id="elem"></div>

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение на разстояние 90% отляво и 100% отгоре:

<div id="elem"></div>

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение на разстояние 30px отляво и отдолу вертикално:

<div id="elem"></div>

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение на разстояние 30px отляво и по център вертикално:

<div id="elem"></div>

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Пример

Нека позиционираме фоновото изображение на разстояние 30px отгоре и по център хоризонтално:

<div id="elem"></div>

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Вижте също

свойство background,
което е съкратено свойство за фона