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