background-position хусусияти

background-position хусусияти элементнинг фон расмининг joylashuvini белгилейди. Joylashuvни ⁅a href="/uzc/markup/manual/css/reference/units/sizes/"⁆ўлчам учун бирликлар⁅/a⁆ ёрдамида белгилаш мумкин. Биринчи қиймат чап тарафдаги joylashuvни, иккинчиси эса юқори тарафдаги joyлаshuvни ифодалайди.

Калит сўзлар ёрдамида ham joylashuvни белгилаш мумкин. Бу ҳолда қийматларнинг тартиби муҳим эмас. Вертикал учун калит сўзлар: top, center, bottom. Горизонтал учун калит сўзлар: left, center, right.

Калит сўзлардан қандай фойдаланиш керак

Расмни калит сўз ёрдамида joylash учун вертикал ва горизонтал учун биттадан қиймат бериш керак. Мисол учун, top right қиймати расмни юқори ўнг тарафда joylashtiradi.

Сўзларнинг тартиби муҳим эмас: top right деб ёзиш мумкин, right top деб хам мумкин. Агар center калит сўзи ishtirok etsa - уни ташлаб кетиш мумкин. Мисол учун, top center билан top бир хил. center center эса center билан бир хил.

Синтаксис

селектор {
	background-position: иккита қиймат probel bilan;
}

Мисол

Andoza бўйича фон расми юқори чап бурчакда boʻladi:

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

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

Мисол

Келинг, фон расмини юқори ўнг бурчакга joylashtiрамиз:

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

Мисол

Келинг, фон расмини пастки ўнг бурчакга joylashtiрамиз:

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

Мисол

Келинг, фон расмини ўнгда ва вертикал бўйича markazga joylashtiрамиз:

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

Мисол

Келинг, фон расмини блокнинг markaziga joylashtiрамиз:

<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 masofaga joylashtiрамиз:

<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% masofaga joylashtiрамиз:

<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 masofaga ва вертикал бўйича pastki chetiga joylashtiрамиз:

<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 masofaga ва вертикал бўйича markazга joylashtiрамиз:

<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 masofaga ва горизонтал бўйича markazга joylashtiрамиз:

<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 хусусияти,
фон учун qisqartirilgan хусуят sifatida