A background-position tulajdonság

A background-position tulajdonság megadja egy elem háttérképének elhelyezkedését. Az elhelyezkedést bármilyen mértékegységgel megadhatjuk. Az első érték a bal oldali eltolást, a második a felső eltolást jelenti.

A pozíció megadható kulcsszavakkal is. Ebben az esetben az értékek sorrendje nem fontos. A függőleges kulcsszavak: top, center, bottom. A vízszintes kulcsszavak: left, center, right.

Hogyan használjuk a kulcsszavakat

Ahhoz, hogy egy képet kulcsszóval helyezzünk el, egy értéket kell megadnunk a függőleges és egyet a vízszintes irányhoz. Például, ha a top right értéket adjuk meg, akkor a kép jobbra fent fog megjelenni.

A szavak sorrendje nem számít: írhatunk top right-t, vagy írhatunk right top-t is. Ha a center kulcsszó szerepel - azt elhagyhatjuk. Például a top center ugyanaz, mint egyszerűen a top. És a center center ugyanaz, mint egyszerűen a center.

Szintaxis

szelektor {
	background-position: két érték szóközzel elválasztva;
}

Példa

Alapértelmezetten a háttérkép a bal felső sarokban jelenik meg:

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

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

Példa

Helyezzük a háttérképet a jobb felső sarokba:

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

Példa

Helyezzük a háttérképet a jobb alsó sarokba:

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

Példa

Helyezzük a háttérképet jobbra és függőlegesen középre:

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

Példa

Helyezzük a háttérképet a blokk középpontjába:

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

Példa

Helyezzük a háttérképet 20px távolságra balra és 40px távolságra felülről:

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

Példa

Helyezzük a háttérképet 90% távolságra balra és 100% távolságra felülről:

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

Példa

Helyezzük a háttérképet 30px távolságra balra és alulra függőlegesen:

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

Példa

Helyezzük a háttérképet 30px távolságra balra és függőlegesen középre:

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

Példa

Helyezzük a háttérképet 30px távolságra felülről és vízszintesen középre:

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

Lásd még

a background tulajdonság,
ami a háttérre vonatkozó rövidített tulajdonság