Da se potsetimo, u HTML pozadina može se definisati za celu stranu, zatim u TABLE, TD i TR tagovima tabela, itd. Pozadina može biti u boji ili u slici. CSS uvodi još neke nove atribute vezane za pozadinu, a samim tim i još neke mogućnosti i efekte. Na primer u CSS možemo postaviti pozadinu i u tekstualnoj liniji. Zapravo CSS može postaviti pozadinu takoreći gde god želimo, odnosno gde postoji vizuelna mogućnost. U CSS se pozadine definišu sledećim atributima:
background-color - boja pozadine. Boja se može zadati slovno na primer crvena boja kao red, u heksadecimalnim zapisu kao u HTML na primer #FFFFFF, a može i u decimalnom formaturgb(255,255,0). background-image - definiše sliku za pozadinu. Putanja slike se zadaje u obliku: "url(putanjadoslike.gif)" background-repeat - definiše da li će se slika u pozadini ponavljati. Vrednosti: o repeat - klasično ispunjava slika površinu pozadine nadovezivanjem dok je ne ispuni, o no-repeat - definiše da slika ne treba da ispuni celu površinu pozadine ukoliko je ne pokriva svojom veličinom, o repeat-x - slika se ponavlja samo vodoravno dok ne ipuni u jednoj "liniji" površinu pozadine, o repeat-y - isto kao sa X samo u ovom slučaju se odnosi na vertikalu. background-attachment - definiše kako će se slika u pozadini ponašati pri skrolovanju. Vrednosti: scroll - prati skrolovanje i, fixed fiksirana i ne prati skrolovanje. background-position - definiše poziciju slike. Vrednosti mogu biti kombinacije unapred definisanih reči: o top left - znači da će se pozadina pojaviti bez ponavljanja samo jednom u gornjem do vrha levom uglu (baš u vrh bez imalo razmaka), o top center - u gornjem centralnom delu, o top right - u gornjem desnom delu, o center left - u centralnom delu po vertikali ali po horizontali u levom delu, o center center - u centralnom delu ali i u centru po horizontali, o center right - u centralnom delu ali uz desnu ivicu o bottom left - u donjem delu skroz i to u levom delu po horizontali, o bottom center - u donjem delu po vertikali a po horizontali u centru, o bottom right - u donjem delu po vertikali a u desnom delu po horizontali, o x% y% - daju se x i y koordinate u procentima od visine i širine ekranske rezolucije ako je upitanju pozadina cele strane, ili procentualno u odnosu na visinu i širinu prostora u koji se smešta pozadina. o xpos ypos - fiksno se definiše položaj najčešće u pikselima (a može i u mm, cm, pc, ex, itd) po vertikali i horizontali gde će se pozadinska slika pojaviti
Ajde sad da vidimo kako se atributi primenjuju u praksi kroz par primera. Počnimo od backgroundcolor: <style type="text/css"> #w1 {background-color: #c5def7;}
Prvi tekst
Drugi tekst
A rezultat će biti pozadina u boji koju definiše heksadecimalni zapis boje #c5def7. Ako pak želimo da nam pozadina bude slikovna onda to radimo pomoću sledećeg kod: <style type="text/css"> #w2 { background-image: url(csspozadina.gif); }
Prvi tekst
Drugi tekst
E sad ako želimo da nam slika pozadine ne ispunjava celu površinu već samo onu kolika je i sama slika pišemo sledeći kod: <style type="text/css"> #w3 { background-image: url(csspozadina.gif); background-repeat: no-repeat; }
Prvi tekst
Drugi tekst
A rezultat:
Ovde vidimo da se slika u pozadini pojavila samo jednom bez ponavljanja. To smo uspeli zbog parametra background-repeat i to zato što je njegova vrednost no-repeat. Ako je vrednost repeatonda se ponavlja po celoj površini kao što je to slučaj u čistom HTML-u. A ako stavimo za vrednostrepeat-x prostor će se puniti slikom samo po jednoj horizontali na vrhu prostora, a ako je repeat-yonda po jednoj vertikali uz levu ivicu prostora. A u kombinaciji sa backgroundposition možemo odrediti i u koji tačno deo prostora želimo da ispunimo, itd. Probajte i vežbajte sve mogućnosti. Naravno za definisanje jednog selektora možemo koristiti više atributa i to u raznim kombinacijama, ali ne samo recimo bacground atribute već i sve moguće ako su interesantni za neki efekat. Znači ovde smo atribute podelili u grupe za pozadinu, za fontove itd ali to samo da bi vi lakše shvatili, ali za definisanje selektora možemo upotrebljavati sve kombinacije svih mogućih CSS atributa ako daju odredjene efekte. Upravo to je jedan od razlog koji daje velike mogućnosti CSS-u za dizajniranje stranica. Zato ajde da vidimo našta se tačno misli vezano za atribut background-attachment, a ujedno ajde da vidimo kako to CSS može da umeće pozadine gde god želimo, što nije bio slučaj sa čistim HTML-om. Primera radi ajde da umetnemo pozadinu u TEXT AREI: <style type="text/css"> #w4 { background-image: url(csspozadina.gif); background-attachment: fixed; }