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% жана жогорудon 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 касиети,
фон үчүн кыскартылган касиет катары кызмат кылат