Programozott tananyag:
Háttérszín
Valamennyi HTML elemnek külön-külön beállíthatjuk a háttérszínét. Alapesetben a háttér teljesen átlátszó.
Háttérkép
Egy HTML elem háttereként képet is lehet használni. Arra mindenképpen ügyelni kell, hogy a háttérkép előtt megjelenő szöveg olvasható maradjon.
Háttérkép ismétlése
Ha a háttérkép mérete kisebb mint a rendelkezésre álló terület, akkor a böngészők alapértelmezetten vízszintesen és függőlegesen egyaránt addig ismétlik a kép megjelenítését, amíg a rendelkezésre álló terület egészét le nem fe
A háttér pozíciója
A background-position tulajdonság segítségével megadhatjuk a háttérkép helyzetét. A pozíció megadása történhet kulcsszavakkal, százalékban vagy hosszmértékegységgel megadva az eltolás mértékét.
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.
A háttér görgetése
A background-attachment tulajdonság segítségével megadhatjuk, hogy a háttérkép az oldal görgetése esetén az oldallal együtt mozogjon, vagy mindig ugyanott jelenjen meg.
A háttér területe
A background-clip tulajdonság segítségével megadhatjuk, hogy a háttérkép vagy háttérkép egy doboz mely területén helyezkedjen el.
A háttér mérete
A background-size tulajdonság segítségével megadhatjuk, hogy a háttérkép milyen méretben jelenjen meg az oldalon.
A háttér beállítása gyorsírással
A háttér beállításait gyorsírással is megadhatjuk, a következő sorrendben: background: background-image background-position / background-size background-repeat background-attachment background-clip background-origin background-color,
A színátmenet ( gradient )
A színátmenetek segítségével a HTML elemek hátterénél 3D hatásokat hozhatunk létre. Kettő szín használata esetén a kezdő és végérték között a böngésző egyenletes átmenetet biztosít.
Lineáris átmenet iránya
A gradiens-vonal iránya megadható a függőleges tengellyel bezárt szögével.
Több lineáris színátmenet
Kettőnél több színt is megadhatunk. Ha a közbenső értékekhez nem nem rendelünk pozíciót, akkor arányosan lesznek elhelyezve. (Pl. A harmadik középre kerül.)
Lineáris színátmenet és átlátszóság
Ha a színátmenet definiálásakor a színek megadására az rgba( ) alakot használjuk, akkor a háttér egyes részei áttetszővé tehetők.
Lineáris színátmenet ismétlése
A repeating-linear-gradient() függvény használatával az átmenetek periodikusan ismétlődnek.
Sugárirányú színátmenetek
Sugárirányú színátmenetnél egy pontból kiindulva ellipszis vagy kör alakban jön létre az átmenet.
Sugárirányú színátmenetek pozíciója
A sugárirányú színátmenet középpontjának pozíciója megadható kulcsszóval, hosszméretben vagy százalékban.
Sugárirányú színátmenetek mérete
A befoglaló kör vagy ellipszis méretét kulcsszavakkal adhatjuk meg.
CSS háttér-
tulajdonságok
a tananyagban
| background-color | CSS1 |
| background-image | CSS1 |
| background-repeat | CSS1 |
| background-position | CSS1 |
| background-attachment | CSS1 |
| background-origin | CSS3 |
| background-clip | CSS3 |
| background-size | CSS3 |
| background | CSS1 |
CSS színátmenetek
a tananyagban
| linear-gradient(); | CSS3 |
| repeating-linear-gradient(); | CSS3 |
| radial-gradient(); | CSS3 |