Pana acum in HTML am invatat doar ca putem pune un fundal-culoare sau un fundal-imagine. Ei bine, in acest tutorial vom invata lucruri noi care ne vor permite sa ne jucam cu fundalul , astfel incat sa ajungem la rezultatul dorit.
Fundal-culoare
Pentru a folosi un fundal-culoare se va utiliza urmatorul atribut: background-color:
Cod:
Acest text are background-ul albastru
Pozitionarea fundalului-imagine
Daca doriti sa pozitionati exact fundalul, veti folosi atributul background-position: . Atentie insa sa nu uitati sa stopati background-ul a se repeta singur: background-repeat:no-repeat;
Exista trei moduri de a face acest lucru: prin definirea lungimi, cu procente, prin folosirea cuvintelor cheie (top, center, left, ...)
Cod:
L>
Fundal-culoare
Pentru a folosi un fundal-culoare se va utiliza urmatorul atribut: background-color:
Cod:
Acest text are background-ul rosu
Acest text are background-ul albastru
Fundal-imagine
Pentru un fundal-imagine veti folosi urmatorul atribut: background-image:url('numeimagine.extensie');.
Prin setarile de baza ale browser-ului, acesta imagine se repeta automat, atat vertical cat si orizontal.
Cod:
Exemplu de background imagine
Repetarea imaginii
Dupa cum am spus mai sus, imaginea se repeta automat. Dar daca noi vrem sa nu se repete, sau sa se repete decat pe orizontala? Pentru a face acest lucru vom folosi urmatorul atribut: background-repeat:
Cod:
Acest background se repeta si pe verticala si pe orizontala
Acest background se repeta doar pe axa verticala
Acest background se repeta doar pe axa orizontala
Acest background nu se va repeta deloc
Pozitionarea fundalului-imagine
Daca doriti sa pozitionati exact fundalul, veti folosi atributul background-position: . Atentie insa sa nu uitati sa stopati background-ul a se repeta singur: background-repeat:no-repeat;
Exista trei moduri de a face acest lucru: prin definirea lungimi, cu procente, prin folosirea cuvintelor cheie (top, center, left, ...)
Cod:
Acest text are un fundal pozitionat in functie de lungime
Acest text are un fundal pozitionat in procente
Acest text are un fundal pozitionat in functie de cuvintele cheie
L>
