VISSZA
MENÜ
TOVÁBBA 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