Omadus background-position

Omadus background-position määrab elemendi taustapildi asukoha. Asukoha saab määrata kasutades suvalisi mõõtühikuid. Esimene väärtus tähistab vasakpoolset taanet, teine - ülemist taanet.

Samuti saab asukohta määrata võtmesõnadega. Sel juhul väärtuste järjekord ei ole oluline. Vertikaalsed võtmesõnad: top, center, bottom. Horisontaalsed võtmesõnad: left, center, right.

Kuidas kasutada võtmesõnu

Pildi paigutamiseks võtmesõnaga tuleb määrata üks väärtus vertikaali jaoks ja üks horisontaali jaoks. Näiteks kui määrata väärtuseks top right, siis pilt asub üleval paremal.

Sõnade järjekord ei ole oluline: võib kirjutada top right, või ka - right top. Kui on võtmesõna center - seda võib ära jätta. Näiteks top center on sama, mis lihtsalt top. Ja center center on sama, mis lihtsalt center.

Süntaks

valija {
	background-position: kaks väärtust tühikuga eraldatuna;
}

Näide

Vaikimisi on taustapilt vasakus ülanurgas:

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

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

Näide

Paneme taustapildi paremasse ülanurka:

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

Näide

Paneme taustapildi paremasse alannurka:

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

Näide

Paneme taustapildi paremale ja vertikaalselt keskele:

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

Näide

Paneme taustapildi ploki keskele:

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

Näide

Paneme taustapildi kaugusele 20px vasakult ja 40px ülevalt:

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

Näide

Paneme taustapildi kaugusele 90% vasakult ja 100% ülevalt:

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

Näide

Paneme taustapildi kaugusele 30px vasakult ja vertikaalselt alt:

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

Näide

Paneme taustapildi kaugusele 30px vasakult ja vertikaalselt keskele:

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

Näide

Paneme taustapildi kaugusele 30px ülevalt ja horisontaalselt keskele:

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

Vaata ka

omadus background,
mis on tausta lühendomadus