In acest tutorial o sa va prezint ce este "background" si cum se foloseste propietatile lui.
Propietatile backgroundului sunt:
Cod:
background-color
background-image
background-repeat
background-attachment
background-position
Da incepem cu background-color:
1.Background-color este cum se vede dupa nume un background pe baza unei colori
Sa dam un exemplu:
Cod:
body{
background-color: white}backgroundul de mai sus este de culoarea alba
2.background-image (evident o imagine)
Exemplu:
Cod:
body{
{background-image:url('imagine.png');}
3.Background-repeat.adica se repeta
Exemplu:
Cod:
{
background-image:url('imagine.png');
background-repeat:repeat-x;
}acum imaginea se repeta la nesfarsit,dar daca vrem sa avem o imagine fixa care sa nu isi schimbe propietatile schimbam
Cod:
repeat-xcu
Cod:
no-repeat4.Background-position cu acest element vom pozitiona imaginea de fundal unde dorim
Exemplu:
Cod:
{
background-image:url('imagine.png');
background-repeat:repeat-x;
background-position:right top;
}Acum imaginea noastra este pozitionata in dreapta sus (right top)
Putem combina propietatile de mai sus foarte usor
exemplu:
Cod:
body {background:#ffffff url('imagine.png') no-repeat right top;}Aceast fundal are:
- fundalul alb
- o imagine care nu se repeta
- pozitia: dreapta sus
5.Background-attachement acest element ne ajuta sa pozitionam o imagine de fundal care mai precisa,este folosita in special atunci cand doriti sa aveti o imagine de fundal care nu se misca in schimb textul sa se deruleze dupa scroll si imaginea este mereu vizibila
Exemplu:
Cod:
body
{
background-image:url('imagine.png');
background-repeat:no-repeat;
background-attachment:fixed;
}Si asta a fost tot!
Tutorial scris de mr.franta
Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.
RaykimMar 16 Oct - 19:55