A background-position tulajdonság segítségével megadhatjuk a háttérkép helyzetét.
A pozíció megadása történhet kulcsszavakkal, százalékban vagy hosszmértékegységgel megadva az eltolás mértékét.
Használható kulcsszavak:
left top: bal oldalon fent
left center: bal oldalon középen
left bottom: bal oldalon lent
right top: jobb oldalon fent
right center: jobb oldalon középen
right bottom: jobb oldalon lent
center top: vízszintesen középen fent
center center: vízszintesen és függőlegesen is középen
center bottom: vízszintesen középen lent
Ha csak egy kulcsszó van megadva, akkor a másik érték center lesz.
A háttérkép pozíciója beállítása:
kijelölő
{
background-position
:
kulcsszó/érték;
}
Példa:
Forráskód
<style>
body {background-color:#eeffee; }
div {width:100px; height:100px;
border:1px solid #660000;
background-image:url('labda_k40.png');
background-repeat:no-repeat;}
#div1 {background-position:center;}
#div2 {background-position:right top;}
#div3 {background-position:20% 80%;}
#div4 {background-position:70px 70px;}
</style>
...
<body>
<div id="div1"><p>center</p></div>
<div id="div2"><p>right top</p></div>
<div id="div3"><p>20% 80%</p></div>
<div id="div4"><p>70px 70px</p></div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: hatter_pozicio.html