Introducere în Web Development

Am văzut deja că folosind proprietatea background, putem să setăm culoarea de fundal a unui element. Acesta este doar vârful icebergului.

Tehnic, background combină valorile a mai multor proprietăți.

Proprietăți de fundal

background-color setează culoarea ce va fi afișată pe fundal.

background-image permite setarea unei imagini ca fundal, inclusiv un gradient. Vezi mai jos.

background-attachment definește ce se întâmplă cu imaginea de fundal atunci când se face scroll.

• local – fundalul se mișcă atunci când se face scroll (standard)

• fixed – fundalul rămâne mereu fix

• scroll – fundalul rămâne fix doar atunci când se face

• scroll pe elementul pe care s-a setat

background-clip definește sub ce părți ale elementului apare fundalul

• border-box – fundalul apare și sub border

• padding-box – fundalul nu apare sub border

• content-box – fundalul nu apare sub zona de padding

• text – fundalul apare sub text (această valoare nu e complet suportată de toate browserele)

background-origin definește unde se va pune prima imagine de fundal față de părțile elementului

• border-box – fundalul începe sub border

• padding-box – fundalul începe sub zona de padding

• content-box – fundalul începe sub zona de conținut

background-position definește unde se vor pune primele imagini.

top, left, bottom, right, center – fundalul începe din partea de sus, stânga, jos, dreapta, respectiv centrul elementului.

Se mai pot folosi și dimensiuni în unități de măsură sau procente.

Se pot combina valorile pentru poziționare precisă.

background-repeat definește cum se va repeta imaginea de fundal.

• repeat – Imaginea de fundal se repetă în ambele direcții.

• repeat-x – Imaginea de fundal se repetă pe orizontală

• repeat-y – Imaginea de fundal se repetă pe verticală

• no-repeat – Imaginea de fundal nu se repetă.

• space – Imaginea de fundal se repetă de câte ori are loc întreagă și se pune spațiu între repetiții

• round – Imaginea se repetă de un număr întreg de ori (fără fracții)

background-size definește cât de mare este imaginea de fundal.

• contain – Va dimensiona imaginea astfel încât să apară cel puțin o dată ca fundal.

• cover – Va dimensiona imaginea astfel încât să acopere tot elementul.

• auto – Browserul va calcula automat cum să dimensioneze imaginea.

Se mai pot folosi valori numerice (inclusiv procente) pentru a dimensiona exact imaginea de fundal.

Ca să fiu sincer, nici eu nu rețin toate aceste proprietăți și valori. Pe unele nici nu am avut ocazia să le folosesc.

Cea mai bună strategie în CSS (de fapt în programare în general), este să citești o dată documentația, sau detaliile din MDN, apoi să revii atunci când ai nevoie. Chestiile pe care le folosești des, le vei reține.

Poți defini mai multe fundaluri, separându-le prin virgulă în valoare, atât la proprietatea generală background, cât și la proprietățile specifice.

                    background: url(bg.jpg), linear-gradient(red, yellow);
                

Imagini de fundal

Proprietatea background-image ne permite să setăm o imagine sau gradient ca fundal. Imaginile se definesc folosind funcția CSS url(«url aici»)

                    background-image: url("https://picsum.photos/200/300")
                

Gradienți

Ca imagine de fundal se pot seta și gradienți, care sunt generați de browser folosind funcții specifice. Cel mai întâlnit fel de gradient din experiența mea este cel liniar. Pentru ceilalți, poți să te uiți la pagina MDN legată de gradienți.

Gradienții liniari se definesc folosind linear-gradient(«parametri»). În cea mai simplă formă se definește lista de culori, ceea ce va genera un gradient de la stânga la dreapta folosind acele culori în proporții egale. De exemplu asta va crea un gradient cu 3 culori egale:

                    linear-gradient(red, yellow, blue)
                

Dacă ai nevoie să setezi direcția gradientului, pui direcția ca primul parametru:

                    linear-gradient(to bottom, aqua, teal)
                

Direcția mai poate fi dată și prin grade:

                    linear-gradient(90deg, aqua, teal)
                

Dacă ai nevoie ca o anumită culoare să fie mutată față de locul unde ar fi în mod normal, poți adăuga procentul la care se află culoarea respectivă după numele culorii, înainte de virgulă:

                    linear-gradient(red 0%, white 10%)