Tutorial fundal

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 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