Уласцівасць 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,
якое з'яўляецца ўласцівасцю-скарачэннем для фону