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    

Háttérpozíció referenciapont


A background-origin tulajdonság segítségével megadhatjuk, hogy mihez viszonyítva határozza meg a böngésző a háttérkép helyzetét.

Használható kulcsszavak :
border-box: a szegély külső széléhez történik a viszonyítás.
padding-box: a belső margó külső széléhez történik a viszonyítás.
content-box: a tartalomterület külső széléhez történik a viszonyítás.


Háttérpozíció referenciapont beállítása:

kijelölő
{
background-origin
:
kulcsszó;
}


Példa:

Forráskód



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