background - újdonság CSS3-ban

Egy kód megírása során figyelnünk kell arra, hogy optimalizált legyen, az oldal gyorsan betöltődjön, hiszen manapság ha egy weboldal betöltődése több, mint 1-2 másodpercig eltart, a felhasználó azonnal odébb áll, hiszen gyakorta sok hasonló honlapot talál.
Egy weboldalnak esztétikus megjelenést kölcsönöz a megfelelő háttérkép kiválasztása, vagy egy szín, ami az oldal alapját adja. Új trendként elterjedt a színátmenetes háttérkép, melyhez már nem szükséges egy képet szerkesztenünk, mert CSS3-ban megoldották ezt a problémánkat, csakúgy, mint a több kép egyszeri kezelését is.
Kezdjünk egy kis ismétléssel. CSS-ben megadhatunk háttérszínt hexadecimális, RGB, vagy név megadással. (Az RGB megadás során negyedik paraméterben az áttetszőség adható meg.)

background-color: #0000ff;
background-color:(0,0,255);
background-color: blue;

Megadhatunk egy konkrét képet:

background-image:url('hatter.jpg');

Háttérkép esetén külön megadhatunk dolgokat, mint ismétlődjön-e a kép, illetve mely tengely mentén (repeat, x-repeat, y-repeat).

background-repeat: no-repeat;

Illetve megadhatjuk a pozícióját (center, top, bottom, left, right). Ezeket párba állítva is megadhatjuk, ekkor ez első érték bal, közép vagy jobb oldal, a másik érték, fent, középen, vagy lent. Ugyanakkor ezeket px-ben is megadhatjuk.

background-position: left top;

Ha body-nak adunk meg háttérképet, akkor beállíthatjuk azt is, hogy a kép mindig ugyanúgy ott maradjon, vagy a szöveggel együtt mozogjon (fixed, scroll).

background-attachment:fixed;

Ezeket egy sorban is meghatározhatjuk, így első paraméter lesz a szín, amit a kép hivatkozás követ, ezután a pozíció meghatározása, majd az ismétlődés megadása.

background: #0000FF url('hatter.jpg') center top no-repeat;

A CSS3 lehetőséget ad arra, hogy több háttérképet adjunk meg egy divnek, ezt nevezzük multi-backgroundnak.

background: url(bg1.png), url(bg2.jpg);

Emellett kódból meg tudjuk valósítani, hogy színátmenetes legyen egy háttér. Ehhez több sorban kell megadnunk az értékeket, hogy minden böngészőre hasson, illetve korábbi változatokra is.

firefox 3.6-tól érvényes
background: -moz-linear-gradient(top,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%);

Chrome,Safari4-től
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b679e), color-stop(50%,#2b88d9), color-stop(51%,#207cca), color-stop(100%,#7db9e8));



Chrome10-től, Safari5.1-től
background: -webkit-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);


Opera 11.10-től
background: -o-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);



IE10-től
background: -ms-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); 

W3C
background: linear-gradient(to bottom,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%);



IE 6-9
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 );

A sokféle megadás ellenére is érdemes egy alap színt meghatározni arra az esetre, ha valamely böngésző nem képes az átmenet megjelenítésére.

A képen nem ismétlődés miatt van középen egy erősebb sáv, a gradiens lett így meghatározva.
Remek segítség ehhez a http://www.css3generator.com/, melyben megadhatjuk a színeket és a kódot legenerálja a számukra.

További hasznos információkat a http://www.w3.org/TR/css3-background/ oldalon találtok.