Sifa ya background-position

Sifa background-position inabainisha eneo la picha ya background ya kipengele. Eneo linaweza kubainishwa kwa kutumia vyombo vya habari vya ukubwa. Thamani ya kwanza inaashiria kiwango cha kushoto, ya pili - kiwango cha juu.

Pia inaweza kubainisha nafasi kwa maneno muhimu. Katika kesi hii, mpangilio wa maadili haujalishi. Maneno muhimu kwa wima: top, center, bottom. Maneno muhimu kwa mlalo: left, center, right.

Jinsi ya kutumia maneno muhimu

Ili kuweka picha kwa neno muhimu, unahitaji kubainisha thamani moja kwa wima na moja kwa mlalo. Kwa mfano, ikiwa utabainisha thamani top right, basi picha itakuwa juu kulia.

Mpangilio wa maneno haujalishi: unaweza kuandika top right, au - right top. Ikiwa kuna neno muhimu center - linaweza kuachwa. Kwa mfano, top center, ni sawa na top tu. Na center center ni sawa na center tu.

Syntax

kichaguli {
	background-position: maadili mawili yaliyotengwa na nafasi;
}

Mfano

Kwa default, picha ya background itakuwa kwenye kona ya juu kushoto:

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

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

Mfano

Wacha tuweke picha ya background kwenye kona ya juu kulia:

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

Mfano

Wacha tuweke picha ya background kwenye kona ya chini kulia:

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

Mfano

Wacha tuweke picha ya background kulia na katikati kwa wima:

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

Mfano

Wacha tuweke picha ya background katikati ya block:

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

Mfano

Wacha tuweke picha ya background kwa umbali wa 20px kushoto na 40px juu:

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

Mfano

Wacha tuweke picha ya background kwa umbali wa 90% kushoto na 100% juu:

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

Mfano

Wacha tuweke picha ya background kwa umbali wa 30px kushoto na chini kwa wima:

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

Mfano

Wacha tuweke picha ya background kwa umbali wa 30px kushoto na katikati kwa wima:

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

Mfano

Wacha tuweke picha ya background kwa umbali wa 30px juu na katikati kwa mlalo:

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

Angalia pia

sifa background,
inayowakilisha sifa fupi kwa background