In CSS la fel ca si in html, background-ul poate sa contina o imagine sau o singura culoare.
Background-ul poate fi definit atat pentru fundalul paginii web cat si pentru paragrafe, celulele unui tabel, text sau div-uri.
Pentru a putea aplica un fundal in CSS se va folosi eticheta "background" insotita de atributele corespunzatoare.
Atributele corespunzatoare acestei etichete sunt urmatoarele:
-background-color
-background-image
-background-repeat
-background-attachment
-background-position
In continuare iti voi explica care este rolul fiecarui atribut al etichetei "background":
Background solid:
Background-ul solid consta in aplicarea unei singure culori pe fundal.
Poți aplica acest fundal folosind eticheta "background-color".
Pentru a aplica culoarea rosu vei scrie urmatorul cod:
"background-color: red;".
EXEMPLU:
| <html> <head> <title>Background solid CSS</title> </head> <body style="background-color: red;"> Background solid </body> </html> |
| ↓ |
|
Background solid |
Background imagine:
Pentru a aplica o imagine pentru fundal trebuie sa folosesti eticheta "background-image".
Trebuie sa specifici numele si calea spre imagine (locația imaginii) pentru ca aceasta sa fie aplicata cu succes.
Intreg codul arata asa: "background-image: url(locatie/nume imagine);".
EXEMPLU:
| <html> <head> <title>Background solid CSS</title> </head> <body style="background-image: url(/imagine.jpg);"> Background imagine </body> </html> |
| ↓ |
|
Background CSS |
Background repetitiv:
Cand o imagine are dimensiunile mai mici fata de obiectul caruia i-a fost aplicata, intre marginile imaginii si ale obiectului va ramane un spatiu alb. Acest spatiu poate fi umplut cu aceeasi imagine folosind atributul "background-repeat".
Imaginea se poate repeta atat pe verticala cat si pe orizontala.
Pentru ca imaginea sa se repete pe verticala se va folosi atributul "repeat-x".
Pentru ca imaginea sa se repete pe orizontala se va folosi atributul "repeat-y".
Daca nu doresti ca imaginea sa se repete vei folosi atributul "background-repeat: no-repeat;"
Codul arata in felul urmator: "background-image: url(/imagine.jpg); repeat-x sau y;".
Exemplu:
GrigDroid - Un Blog Despre Android