Navigare rapidă

Ultimele subiecte
» Wireless ipb theme [punBB]
Scris de D1esel Vin 30 Noi - 21:51
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
Cuvinte-cheie

edit  

Proprietatea css background


Bun gasit,
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-x
cu
Cod:
no-repeat


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

Comentariile utilizatorilor
Membru veteran
avatar
la data de Mar 16 Oct - 19:55
Raykim Membru veteran
Conectat
Mutat in sectiunea corespunzatoare!