Gradient (átmenetes):

Igen divatos és vonzó, választunk két egymáshoz illő színt, fentről lefelé készítünk belőle egy átmenetet (pl: http://mint.com vagy http://www.ronpaul2008.com), és kész. Egyébként itt az egész háttér ennyi: body-background.png. A css fájlunkba ezt valahogy így kell aplikálnunk.

body {background: #fff url(/images/body-background.png) repeat-x top;}

A háttér színeként azt a színt határozzuk meg, ami alul van, így hosszabb oldal esetén is szép egybefüggő hátteret kapunk.

Egyszínű:

Manapság a letisztult hátterek a használatosak, így bátran használhatunk egyetelen egy színt háttérként. Természetesen fontos, hogy egyébként illeszkedjen az oldal hangulatához. Amennyiben ilyen egyszínű a háttér, akkor figyelnünk kell arra, hogy amit rá rakunk, az szólaljon meg. Mint a vörös szőnyegen egy egyszerű estélyi ruhához gyönyörű gyémánt nyakék illik. Legyen benne különlegesség, legyen figyelemfelkeltő. Néhány példa erre:

• http://keasone.de
• http://www.intervisual.de
• http://www.ftofani.com
• http://alexsancho.name
• http://mstefan.com

Mintás:

A mintához bátorság és ügyesség kell, az biztos. Egyrészt azért, mert a mintás hátterek nagyon erős karaktert adnak az oldalunknak, így csak olyat szabad választanunk, mely valóban illik a weblap hangulatához. Példaként az egyik alkotásomat, a cegleditermal.hu-t hoznám fel: fürdőről van szó, így próbáltam olyasmi mintát keresni, mely hasonlít egy medence aljához. Megpróbáltam a lehető legvisszafogottabbá tenni amellett, hogy egy adott hangulatot szerettem volna vele tükrözni. Érzésem szerint jól sikerült.

A minták igen népszerű csoportja a csíkos. Pl. http://www.vitastil.se/ Úgymond tipikus web 2.0-s háttér. Van egy weboldal (http://www.stripegenerator.com/), ahol az igényeinknek megfelelő csíkos háttért csinálhatunk, aztán el is menthetjük a képet png formátumban, melyet az alábbi formátumban tudunk css fájlunkba betenni:

body {background: #fff url(/images/stripes.png) }

Ide nem kell külön attribútumot írni a háttérkép mellé, mint pl az átmenetesnél, mert itt vízszintesen és függőlegesen is ismétlődni fog a kép, és ezt automatikusan beállítja a css.

Legyen itt még egy jó pár oldal, ahol böngészhetünk a kedvenc mintánk után:

• http://www.dinpattern.com – kb 50 különböző háttérminta, többféle stílusból
• http://squidfingers.com/patterns – több, mint 150 különböző minta, a legtöbb a jó fajtából való
• http://www.k10k.net/pixelpatterns – itt közel ezer minta van, a legtöbbet a látogatók töltötték fel
• http://peachinparis.livejournal.com – kifinomult háttérgyűjtemény
• http://www.kollermedia.at/pattern4u – jelenleg 260 egyedi háttérminta kap itt helyet. Mindenképp érdemes átnézni őket!
• http://bgmaker.ventdaval.com – igazi móka, próbáld ki te is, milyen a háttérminta tervezés :)
• http://www.tartanmaker.com – a csíkgenerátor terítőmintás párja

Azért arra figyeljünk, hogy a mintáknak is van határa. Felejtsük el tehát ezeket: http://www.crazyeddy.com/plp Már nem 1998-ban vagyunk!