Cauta rapid aici ↑

CSS -- FUNDAL

Fiecare pagina web are un fundal, fie ca este vorba despre o simpla culoare sau de o imagine complexa. Pentru a adauga un fundal cat mai atractiv limbajul CSS vine cu cateva proprietatii si care vor avea valorii alese de noi. Putem merge mai departe si cu siguranta asa vom face si putem adauga fundaluri la orice tag HTML ne dorim, insa nu intotdeauna se vor vedea si aici depinde si de ce insereaza acel tag in pagina web sau opacitatea acestuia si nu numai.

Proprietatii CSS pentru definirea unui fundal

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background

Background Color

Aceasta proprietate specifica culoarea de fundal pe un tag ales de noi. Culorile pot fi in valori hexazecimale (cele care incep cu caracterul diez [#] si sunt urmate de 3 sau 6 litere ori cifre sau combinat) sau putem folosi culorile suportate de catre orice browser si sunt denumite prin simple cuvinte (ex. red, aqua, blue, green, silver etc.). Putem, de asemenea, sa folosim ca valoare pentru proprietatea background-color si aceste structuri (ce seamana ca niste functii din alte limbaje) : rgba(34, 46, 67, 1) si hsla(25, 59, 84, 0.5). RGB vine de la red , green si blue iar ultimul caracter este alpha si se refera exclusiv la opacitate iar valorile pentru alpha se vor situa undeva intre 0.0 si 1.0 sau 1 simplu. In paranteze vom avea valorile pentru fiecare culoare, intre 0 si 255 maxim, acestea fiind in ordinea in care sunt afisate literele RGB si acesta este un standard si nu se pot modifica. In cazul HSLA vom avea aceeasi regula iar HSLA este acronimul de la Hue , Saturation si Luminance (sau Lightness) si nu este nevoie de traducere. Caracterul "a" este intalnit si aici si inseamna acelasi lucru, alpha si are acelasi rol. Valorile sunt declarate in aceeasi ordine ca si la RGB si vor putea fi definite in procente sau de la 0 la 255. De retinut ca acest caracter alpha este optional si se poate renunta la el. Putem scrie direct rgb() sau hsl() ori o valoare de culoare in forma hexazecimala .

Background Image

Cu aceasta proprietate putem adauga ca fundal o imagine pe care ne-o dorim si pentru asta este obligatoriu sa cunoastem cele doua cai care pot duce catre poza noastra: calea absoluta si calea relativa . Ca valoare pentru aceasta proprietate vom folosi aceasta mica structura url() . Intre paranteze vom folosi calea care duce catre poza pe care vrem sa o inseram.

 body { background-image: url(../poze/nume-poza.png); } 

Daca poza are o dimensiune mai mica sau mai mare decat ecranul monitorului atunci trebuie sa stim ca browserul are ca setare default sa repete poza de la stanga la dreapta si de sus in jos pana umple tot ecranul monitorului. Pentru a nu repeta poza vom folosi urmatoarea proprietate background-repeat: no-repeat cu valoare . In acest moment poza noastra de fundal va fi afisata in partea stanga-sus si va continua cat este ea de mare si nu va fi repetata. Putem centra poza de fundal sau sa o mutam in coltul din dreapta-sus dupa plac folosind urmatoarea proprietate background-position: right top cu valoare sau proprietatea background-position: center cu valoare .

In cazul in care avem o poza ce imita un gradient putem sa " ii spunem " browserului sa repete poza pe axa X sau Y (orizontala si verticala). In acest caz vom folosi valoarea repeat-x sau repeat-y dupa caz.

Indiferent de cum ne-am setat sa ne fie afisata poza pe fundal, aceasta se va derula in momentul in care vom da scroll. Pentru a "bloca" poza pe spatiul unde se afla putem folosi urmatoarea proprietate background-attachment: fixed cu valoare .

Toate aceste lucruri se puteau realiza mult mai simplu insa am folosit toate aceste proprietati cu valori pentru a va familiariza cu ele. Folositi proprietatea generala background iar valorile le adaugati ca si la celelante si separate de un spatiu intre ele.