Vetia background-position

Vetia background-position përcakton vendndodhjen e figurës së sfondit të një elementi. Vendndodhja mund të përcaktohet duke përdorur çdo njësi për madhësi. Vlera e parë tregon zhvendosjen nga e majta, e dyta - zhvendosjen nga lart.

Gjithashtu mund të përcaktohet pozicioni me fjalë kyçe. Në këtë rast, rendi i vlerave nuk ka rëndësi. Fjalët kyçe për vertikalin: top, center, bottom. Fjalët kyçe për horizontalin: left, center, right.

Si të përdoren fjalët kyçe

Për të pozicionuar figurën me fjalë kyçe, duhet të specifikoni një vlerë për vertikalin dhe një për horizontalin. Për shembull, nëse specifikoni vlerën top right, figura do të vendoset lart dhe djathtas.

Rendi i fjalëve nuk ka rëndësi: mund të shkruani top right, ose mund të shkruani - right top. Nëse ka fjalë kyçe center - ajo mund të hiqet. Për shembull, top center, është e njëjtë me thjesht top. Dhe center center është e njëjtë me thjesht center.

Sintaksa

përzgjedhësi {
	background-position: dy vlera të ndara me hapësirë;
}

Shembull

Si parazgjedhje, figura e sfondit do të jetë në cepin e sipërm të majtë:

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

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

Shembull

Le ta pozicionojmë figurën e sfondit në cepin e sipërm të djathtë:

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

Shembull

Le ta pozicionojmë figurën e sfondit në cepin e poshtëm të djathtë:

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

Shembull

Le ta pozicionojmë figurën e sfondit djathtas dhe në qendër vertikalisht:

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

Shembull

Le ta pozicionojmë figurën e sfondit në qendër të bllokut:

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

Shembull

Le ta pozicionojmë figurën e sfondit në një distancë prej 20px nga e majta dhe 40px nga lart:

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

Shembull

Le ta pozicionojmë figurën e sfondit në një distancë prej 90% nga e majta dhe 100% nga lart:

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

Shembull

Le ta pozicionojmë figurën e sfondit në një distancë prej 30px nga e majta dhe në fund vertikalisht:

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

Shembull

Le ta pozicionojmë figurën e sfondit në një distancë prej 30px nga e majta dhe në qendër vertikalisht:

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

Shembull

Le ta pozicionojmë figurën e sfondit në një distancë prej 30px nga lart dhe në qendër horizontalisht:

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

Shihni gjithashtu

vetia background,
e cila është një veti e shkurtuar për sfondin