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