HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

A háttér pozíciója


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