background-position häsiýeti

background-position häsiýeti elementüň fon suratynyň ýerleşişini kesgitleýär. Ýerleşişi islendik ululyk birlikleri bilen kesgitläp bolýar. Birinji baha çepdäki aralygy, ikinji baha ýokardaky aralygy görkezýär.

Ýerleşişi açar sözler bilen hem kesgitläp bolýar. Bu ýagdaýda bahalaryň tertibi möhüm däl. Düşelge üçin açar sözler: top, center, bottom. Gorizontala üçin açar sözler: left, center, right.

Açar sözler bilen nädip işlemeli

Suraty açar söz bilen ýerleşdirmek üçin, düşelge üçin bir baha we gorizontala üçin bir baha görkezmeli. Mysal üçin, top right bahasyny görkezseňiz, surat ýokary sagda ýerleşer.

Sözleriň tertibi möhüm däl: top right ýazyp bolýar, ýa-da right top ýazyp bolýar. Eger center açar sözi bar bolsa - ony atlap geçip bolýar. Mysal üçin, top center, diňe top ýaly. center center bolsa diňe center ýaly.

Sintaksis

selektor {
	background-position: iki baha aralyk bilen;
}

Mysal

Deslapky ýagdaýda fon suraty ýokary çep burçda bolar:

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

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

Mysal

Geliň fon suraty ýokary sag burça ýerleşdireliň:

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

Mysal

Geliň fon suraty aşaky sag burça ýerleşdireliň:

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

Mysal

Geliň fon suraty sagda we düşelgede merkezde ýerleşdireliň:

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

Mysal

Geliň fon suraty bloguň merkezinde ýerleşdireliň:

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

Mysal

Geliň fon suraty çepden 20px we ýokardan 40px aralykda ýerleşdireliň:

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

Mysal

Geliň fon suraty çepden 90% we ýokardan 100% aralykda ýerleşdireliň:

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

Mysal

Geliň fon suraty çepden 30px aralykda we düşelgede aşakda ýerleşdireliň:

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

Mysal

Geliň fon suraty çepden 30px aralykda we düşelgede merkezde ýerleşdireliň:

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

Mysal

Geliň fon suraty ýokardan 30px aralykda we gorizontala merkezde ýerleşdireliň:

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

Şeýle-de görmeli

background häsiýeti,
fon üçin gysga häsiýet bolup hyzmat edýär