Háttér és színátmenet.

A színeket többféleképpen írhatjuk le; a böngésző mindegyiket ugyanarra a színre számolja át:

• név: tomato, white – kényelmes, de kevés a választék;
• hexadecimális: #RRGGBB – a vörös, zöld, kék összetevő 00–FF között; nyolc jeggyel (#RRGGBBAA) az átlátszóság is;
• rgb(): ugyanez tízes számrendszerben (0–255), perjel után az átlátszóság: rgb(72 121 179 / 0.5);
• hsl(): árnyalat (0–360°, a színkör szöge), telítettség és világosság százalékban – ebben a formában könnyű egy szín világosabb vagy sötétebb változatát elkészíteni.

A linear-gradient() egy egyenes mentén vezeti át a színeket. A szöget a 12 órától, az óramutató járásával mérjük: 0deg = felfelé, 90deg = jobbra (ugyanaz, mint a to right), 180deg = lefelé – ez az alapértelmezés. A színek után álló százalék a színállomás helye; ha két szín ugyanott van, éles határ keletkezik.

A radial-gradient() egy középpontból kifelé halad, kör (circle) vagy ellipszis (ellipse, alapértelmezés) alakban. A méretkulcsszó dönti el, hol ér véget az utolsó szín: a középponthoz legközelebbi oldalnál (closest-side), a legtávolabbi saroknál (farthest-corner, alapértelmezés) stb. Tolj el a középpontot is az at szóval, hogy a kulcsszavak különbsége látsszon!

A minta egy 160 × 120 px-es kép (a bal felső sarkát a „BF” felirat jelöli), a doboz 2:1 arányú. Mivel a kép és a doboz aránya eltér, jól látszik a különbség:

• cover: a kép kitölti a dobozt, a kilógó része levágódik;
• contain: a teljes kép belefér, közben üres sáv maradhat;
• background-position: a kép melyik pontja kerül a doboz melyik pontjára (0% 0% = bal felső, 100% 100% = jobb alsó);
• background-repeat: ismétlődjön-e, és merre; a space egész számú képet hézaggal oszt el, a round átméretezi, hogy kijöjjön.

A background tulajdonságnak vesszővel elválasztva több réteget is megadhatunk. A rétegek úgy rakódnak egymásra, mint a papírlapok: az elsőként felsorolt van legfelül, az utolsó legalul (és csak az utolsó rétegben adható meg háttérszín). Kapcsold ki-be és rendezd át a rétegeket:

• Hex, rgb(), hsl(): ugyanaz a szín; az átlátszóság mindegyikben megadható.
• A színátmenet háttérkép: a background-image-hez (vagy a background-hoz) tartozik, nem a background-color-hoz.
• cover kitölt és levág, contain belefér és üresen hagy.
• Több háttérréteg esetén az első van felül.