Háttérkép beilleszthető egy adott terület teljes háttereként, illetve annak egy bizonyos területére.
A háttérkép mozgatható is, azaz a dokumentum szövegének hátterében, folyamatosan mozog.

background-attachment háttér-alárendelés	background-color háttér-szín	background-image háttér-kép	background-position háttér-pozíció	background-repeat háttér-ismétlődés	Példa
scroll: body vagy container területre ajánlott. Görgetősávval együtt mozog fixed: body vagy container területre ajánlott. Fixen marad, nem követi a görgetősávot inherit: öröklődés	color-rgb színkód color-hex színkód color-neve (Angol) transparent átlátszó inherit öröklődés	url(kép elérési útvonala) none nincs inherit öröklődés	left top - bal felső left center - bal közép left bottom - bal alsó right top - jobb felső right center - jobb közép right bottom - jobb alsó center top - középpre fent center center - totál közép center bottom - középpre lent x% y% - pozíció %-ban xpos ypos - pozíció px-ben inherit - öröklődés	repeat - ismétlődés az adott területen repeat-x - ismétlődés vízszintesen repeat-y - ismétlődés függőlegesen no-repeat - ismétlődés nincs inherit - ismétlődés öröklődik	Háttérkép beillesztése tetszőleges jelölőelemhez, vagy id és class osztályazonosítóhoz Háttérkép stílus meghatározásokat külön CSS, azaz stílusfájlban írjuk meg. Háttérkép elhelyezési példa, a body területére: body { background-attachment: fixed;; background-color: peru; background-image: url("sargakocka.jpg"); background-position: top left; background-repeat: repeat; }

---

Háttérkép a bal felső sarokban. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: top left;}	Háttérkép középpen fent. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: center top; }	Háttérkép a jobb felső sarokban. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: top right; } Megjegyzés: top right; vagy right top; ugyan azt jelenti	Háttérkép jobboldalt középpen. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: center right; }	Háttérkép a jobb alsó sarokban. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: top right; }
Háttérkép középpen lent. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: center bottom; }	Háttérkép a bal alsó sarokban {height: 200px; width:500px; border: 1px dashed deeppink; background-color:pink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: left bottom; }	Háttérkép baloldalt középpen, és háttérszín. {height: 200px; width:500px; border: 1px dashed deeppink; background-color:azure; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: center left; }	Háttérkép totál középpre, és háttérszín. {height: 200px; width:500px; border: 1px dashed deeppink; background-color:peru; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: center center; }	Háttérkép x és y koordinátán százalékban. A kép, tetszőleges helyre pozícionálható. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: 30% 20%; }
Háttérkép x és y koordinátán px értékkel. A kép, tetszőleges helyre pozícionálható. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: no-repeat; background-position: 40px 50px; }	Háttérkép ismétlődéssel. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); }	Háttérkép ismétlődés baloldalt függőlegesen. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: repeat-y; }	Háttérkép ismétlődés középpen, fentről lefelé. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-position: center top; background-repeat:repeat-y; }	Háttérkép ismétlődés jobboldalt, fentről lefelé. {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-position: right top; background-repeat:repeat-y; }
Háttérkép ismétlődés fent, vizszíntesen {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-repeat: repeat-x; }	Háttérkép ismétlődés baloldal közepétől, jobbra {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-position: center left; background-repeat: repeat-x; }	Háttérkép ismétlődés bal alsó saroktól, jobbra {height: 200px; width:500px; border: 1px dashed deeppink; background-image: url("sargakocka.jpg"); background-position: left bottom; background-repeat: repeat-x; }	Ismétlődés baloldalt és lent, jobbra. .hatterkep { height: 200px; width: 550px; background-image: url("sargakocka.jpg"); background-position: left top; background-repeat: repeat-y; } .hatterkep p{ height: 195px; width: 550px; margin: 0px; padding-top: 5px; background-image: url("sargakocka.jpg"); background-position: left bottom; background-repeat: repeat-x; }
Háttérkép elrendezés "U" alakzatban. <div id="hatterkep"> <span class="hatterkep"> <p> Dokumentum szövege </p> </span> </div> #hatterkep { height: 200px; width:550px; background-color: #f93; border: 3px dashed deeppink; padding-bottom: 0px; margin-left: 3px; background-image: url("sargakocka.jpg"); background-position: right top; background-repeat: repeat-y; } .hatterkep { position: absolute; margin-top:0px; margin-left:0px; height: 200px; width:550px; background-image: url("sargakocka.jpg"); background-position: left top; background-repeat: repeat-y; } #hatterkep p{ height: 190px; width:540px; margin: 0px; padding: 5px; background-image: url("sargakocka.jpg"); background-position: left bottom; background-repeat: repeat-x; } .		Háttérkép, a szöveg hátterében mozog! <table> <tr> <td class="hatterszin"> <div class="animacio"> <h2> Címsor</h2> <p>Szövegsorok</p> </div> <div><marquee direction="up"> <p class="hatterkep"> </p></marquee> </div> </td> </tr> < /table> .animacio{position: absolute; margin-top:10px; margin-left:10px; height: 300px; width:500px; } .hatterkep{ background-image:url("../fotok/sargakocka.jpg"); height: 300px; width:500px;} .hatterszin{background-color: peru;}

 

 

A háttérkép több irányú megjelenítéséhez, az adott területhez, több jelölőelemet is felhasználunk.
Háttérképet rendelünk az id azonosítóhoz, a class osztályazonosítóhoz, és a "p" jelölöelemhez.
A háttérkép több irányú megjelenésénél, a div id határozza meg a fő területet, a span class jelöli ki a második területet, végül a "p" jelölőelem.

Háttérkép beillesztésével díszíthetjük a weblapot.
Háttérkép tetszőleges képből tetszőleges méretben kivágható.
Háttérkép elhelyezése és annak megjelenése, mindenki fantáziájára van bízva.
Háttérkép beillesztésével, tetszőleges háttér alakzatok jeleníthetők meg.
Háttérkép beillesztésével, szellemképeket is varázsolhatunk weblapunkra.
A háttérkép, tetszőleges jelölőelemhez beilleszthető.
A háttérképet minden böngészőprogram megjeleníti.
A háttérkép kiválasztásánál figyeljünk oda, hogy a dokumentum szövege jól olvasható legyen, mert ellenkező esetben nagyon zavaró is lehet.

 

 

Vissza a lap elejére