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 mérete


A background-size tulajdonság segítségével megadhatjuk, hogy a háttérkép milyen méretben jelenjen meg az oldalon.

Használható kulcsszavak :
contain: a háttérkép mérete, a képarány megtartása mellet úgy változik, hogy lefedje a rendelkezésre álló területet. Egyik irányban túlnyúlhat.
cover: a háttérkép mérete, a képarány megtartása mellet úgy változik, hogy egyik irányban kitöltse a rendelkezésre álló területet. A másik irányban üres terület maradhat.

Megadhatjuk a szélességet és a magasságot százalékban vagy hosszmértékben. Százalék megadással arányosan, torzulás mentesen csökkenthetjük a kép méretét.

A háttér méretének beállítása:

kijelölő
{
background-size
:
kulcsszó/érték;
}


Példa:

Forráskód


<style> 
  body {background-color:#eeffee; } 
  div {width:120px; height:100px; padding:10px;margin:2px; 
    border:6px dashed #660000; 
    background-image:url('labda_k100.png'); 
    background-repeat:no-repeat; 
    background-position:right top;} 
  #div1 {background-size: 80px 80px;} 
  #div2 {background-size: cover;} 
  #div3 {background-size: contain;} 
</style> 
... 
<body>   
  <div id="div1"><p>80px 80px</p></div> 
  <div id="div2"><p>cover</p></div> 
  <div id="div3"><p>contain</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_size.html