Totul despre background in CSS3

iNoob | Stefanescu Mihai | 2020-10-11

---

Background-ul unui website poate schimba total design-ul tau, scopul acestui ghid este sa te ajute sa intelegi cum functioneaza acest background si cum sa folosesti diverse tehnici. Pentru acest ghid voi folosi Notepad++, PhotoShop pentru a creea niste imagini de fundal si Google Chrome, dar voi puteti folosi orice aplicatii doriti.

Setarea

Pentru inceput avem nevoie de documentele HTML si CSS, pentru a face asta porniti Notepad++ (sau ce editor folositi) si creeati 2 documente, salvati-le ca index.html si celalalt main.css si salvati-le in acelasi folder (sau pe desktop).In primul fisier scrie structura unui fisier html standard si fa legatura cu main.css

Acum deschide fisierul main.css si adauga codul urmator:

[cc name=”css1″]

Culori Solide

Ce-a mai simpla metoda este sa alegi o culoare ca si fundal. Pentru a face asta modifica-ti tag-ul body precum mai jos:

[cc name=”css2″]

acum daca deschizi index.html in browser pagina va avea background-ul negru.Si daca nu te multumesti cu acest mod de a alege o culoare pentru fundal mai avem si alte metode, precum:

Poti opta pentru versiunea hex:

[cc name=”csshex”]

Poti opta pentru versiunea rgb:

[cc name=”cssrgb”]

Sau poti opta pentru versiunea HSL:

[cc name=”csshsl”]

Dar totusi, o culoare de fundal nu este atat de impresionanta, un gradient sau o imagine ar fi mai potrivita, dar asta depinde de tipul de website pe care il creezi.

Imagine de fundal

In continuare va voi arata cum sa folositi o imagine .jpg pe post de fundal.Cand folosesti o imagine de fundal trebuie sa te asiguri ca este destul de mare astfel incat sa nu se vada urat pe monitoarele cu rezolutie mare.

Prima metoda pe care o putem folosi este sa setam imaginea ca fundal si sa o plasam in coltul din stanga sus al browser-ului.

[cc name=”css3″]

Evident, trebuie sa fie numele imaginii voastre in loc de “image.jpg” si locatia corecta in functie de locatia fisierului CSS. Daca ne uitam ce am facut pana acum arata bine, dar mai avem o problema….daca imaginea este prea mica?

Pai, imaginea se repeta pana cand umple complet fundalul browserului, dar asta nu este exact ce ne-am dorit….

Ce-a mai buna metoda pentru a seta o imagine ca fundal este urmatoarea:

[cc name=”css4″]

Folosind acest mod imaginea va fi mereu in centul ecranului si indiferent de marimea acesteia nu se va repeta ci va fi marita pentru dimensiunea browser-ului.

Fundal repetitiv

Exista momente in care repetarea unei imagini este foarte folositoare, nu doar creeaza un efect minunat dar ajuta la incarcarea mai rapida a site-ului.

Pentru aceasta parte a ghidului voi folosi o imagine de la Subtle Patterns pe care am descarcat-o si am folosit urmatorul cod:

[cc name=”css5″]

In imaginea urmatoare nu vedeti decat o imaginea destul de mica repetandu-se de cate ori este nevoie pentru a umpla fundalul browserului.

Dar daca vreau sa repet imaginea doar pe orizontala? Pentru asta am sa folosesc imaginea urmatoare –http://www.caletaparaisoowners.info/BlueToWhiteGradient.jpg

[cc name=”css6″]

si acum, daca doriti sa se repete pe verticala? Pentru asta voi folosi: http://qbi-lab.org/images/background-gradient-overlay.png si codul:

[cc name=”css7″]

Ce mai putem face? Putem pune o imagine mai mica si restul sa umplem cu o culoare.

Pentru acest lucru am sa folosesc aceasta imagine http://www.pptbackground.net/plog-content/images/powerpoint/transportation-backgrounds/yellow-gradient-ppt-templates.jpg si voi folosi acest cod:

[cc name=”css8″]

Fundalul containerului

Poate fi folositor si un fundal pus unui div, iar pentru a face asta am sa creez un container si sa aplic o culoare solida ca background.

Pentru inceput voi creea un div in main.css adaugand urmatorul cod chiar dupa } de la body:

[cc name=”css9″]

si acum ne vom indrepta atentia catre fisierul HTML, unde vom creea un div.

Acum, daca deschizi browser-ul poti observa ca nu am creeat doar un container, dar l-am facut si transparent! Cum am facut asta? Ei bine, cand am specificat culoarea background-ului:

[cc name=”css10″]

Ultimul cod este in rgba scris, presupun ca deja ati observat ca avem o a 4-a valoare care este defapt opacitatea.

Mai multe imagini de fundal

Interesul meu este sa aplic mai mult decat un background, sa aplic 2. De exemplu voi lua un gradient (http://www.monitortests.com/gradient.png) si o imagine repetitiva (http://subtlepatterns.com/patterns/noise_lines.zip).

[cc name=”css11″]

Cu asta am incheiat….cam atat am avut de spus despre background-uri in CSS3, sper ca v-am fost de ajutor intr-o oarecare masura.