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

cssszelektor {
  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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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:

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

css#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