Motivul

Imi amintesc si acum primul meu contact cu designul de site-uri web. Eram in clasa a zecea la ora de dactilografie si profesoara si-a propus sa ne invete HTML. Era o activitate optionala, insa alegerea intre teste cronometrate de dactilografie si a invata cum sa construiesti pagini web a fost una usoara. Pana la sfarsitul anului respectiv, am creat de multe site-uri web. Elementul comun  al acestora  a fost folosirea de elemente de fundal repetate. Stiti despre ce vorbesc: acele fundaluri continue pentru a crea aparenta unei suprafete de apa, pietre, cer instelat, textura metalica sau textila.

Desi imaginile repetate de fundaul reprezinta o caracteristica distinctiva designului web de la inceputul anilor 90, ele sunt totusi exemple clasice de motive decorative. Motivul este folosit de multa vreme pentru a adauga bogatie si interes vizual tuturor tipurilor de design. Pe web, imaginile de fundal continue au fost preferate la inceput deoarece ele reduceau dimensiunea paginii si timpul de descarcare al acesteia. Folosirea unei imagini mici, care putea fi aranjata in asa fel incat sa umple zona de fundal, in locul unei imagini mari, reducea semnificativ timpul de descarcare pentru vizitatorii site-ului care foloseau un modem.

Doar pentru ca imaginile de fundal aranjabile au un trecut controversat, nu inseamna ca trebuie sa evitati sa le folositi si astazi. De fapt, ele sunt folosite mai mult decat probail va imaginati.  Folosirea CSS a imbunatatit semnificativ nivelul de control pe care designerii il au asupra modului in care functioneaza imaginile de fundal. Inainte de existenta CSS, imaginile de fundal puteau fi asociate doar cu elementele body si table; acum, imagini de fundal pot fi aplicate la alegere asupra aproape oricarui element. Pot fi folosite oricare dintre cele cinci proprietati CSS(si in plus o proprietate contractata) pentru a stabili fundalul unui element:

background-color Prin intermediul acestei proprietati, oricarui element i se poate stabili o culoare de fundal. De exemplu, daca am vrea sa stabilim culoarea fundalului unui element la o nuanta placuta de verde-albastrui(00B2CG), vom adauga urmatoarea declaratie la regula de stil a elementului respectiv:

background-color: #002B2CC;

Atunci cand sunt folosite valori hexadecimale in CSS, este necesar ca valorii numarului sa-i fie adaugat prefixul #, asa cum vedeti mai sus. Puteti specifica si valoarea transparent daca nu doriti ca fundalul elementului sa contina culoare. De fapt, transparent este valoarea implicita a proprietatii background-color . Ati putea fi tentat sa folositi nume de culori precum Aquamarine sau Blanched-Almond, insa cum doar 16 nume de culori sunt aprobate de W3C in specificatia HTML 4.0

background-image Daca vrem sa folosim o imagine de fundal al unui element, putem specifica acest lucru folosind proprietatea background-image . Valorile posibile sunt url(‘numele fisierului’) sau none. Daca am dori sa stabilim ca fundal al unui element fisierul animalcracker.png, am adauga urmatoarea declaratie la regula de stil a elementului repsectiv:

background-image: url(‘animalcracker.png’);

background-repeat Exista patru valori posibile pentru background-repeat: repat, repat-x, repeat-y si no-repeat. Valoarea implicita este repeat, care face ca imaginea de fundal sa fie aranjata vertical si orizontal. Cu repeat-x, imaginea de fundal va fi pozitionata orizontal repetat. Acest lucru este util atunci cand doriti sa aplicati o alaturare orizontala a aceleiasi imagini sau aceluiasi degrade, dar doriti ca restul elementului sa aiba doar culoarea de fundal specificata. In mod similar repeat-y face ca imaginea de fundal sa fie repetata pe verticala. In cele din urma no-repeat este folosit atunci cand aveti o imagine de fundal pe care nu doriti sa o repetati in nici un fel.

background-attachment Aceasta proprietate stabileste daca imaginea de fundal isi mentine pozitia sau se misca odata cu continutul atunci cand pagina este derulata. Poate avea valorile fixed sau scroll, cea din urma fiind valoarea implicita. Atunci cand background-attachment  are valoarea fixed, fundalul va fi pozitionat relativ la zona de afisare, astfel incat, atunci cand derulati pagina, imaginea de fundal sa ramana fixata in acelasi loc.

background-position Aceasta proprietate controleaza pozitia unei imagini de fundal si accepta doua valori: pozitia orizontala si cea verticala a imaginii. Aceste valori pot fi atribuite prin cuvinte cheie(right, center sau left pentru pozitia orizontala:top, center sau bottom pentru cea verticala), folosind unitati de masura acceptate de CSS sau folosind procentaje. De exemplu, daca doriti ca o imagine de fundal sa fie centrata orizontal si aliniata partii superioare a unui element, puteti specifica acest lucru fie folosind cuvinte cheie(background-position:center top), fie prin procente(background-position: 50% 0%). Daca am vrea sa pozitionam imaginea la 300 de pixeli fata de marginea stanga a elementului si la 400 de pixeli de cea superioara, am putea folosi declaratia background-position: 300px 400px.

Pentru a rezuma rapid toata aceasta informatie, dezvoltatorii CSS au creat o proprietate contractata care ne permite sa specificam valorile tuturor acestor cinci prorietati intr-o singura declaratie background. Aceasta functioneaza astfel:

element { background: background-color background-image background-repat background-position background-attachment;}

Ca exemplu, evaluati urmatoarele doua reguli de stil care produc exact acelasi rezultat – un rand de saratele repetate afisate pe un fundal portocaliu, de-a lungul marginii inferioare a unui div cu id=”hihopickles”;

#hihopickles {

background-color: #FF9900;

background-image: url(‘animalcracker.png’);

background-repeat: repat-x;

background-position: left bottom;

background-attachment: fixed;

}

#hihopickles {

background: #FF9900 url(‘animalcracker.png’) repeat-x left bottom fixed;

}