Website XXL

Tutoriale CSS: Fundaluri css

Fundaluri css

Fundalul

Puteti stiliza fundalul unui element cu o declaratie de proprietate adecvata.

background: #ffffff url(calea_catre_imagine) top left no-repeat fixed;
[ul] Valori: [li]attachment[/li] [li]color[/li] [li]image[/li] [li]position[/li] [li]repeat[/li] [/ul]

Sau, puteti seta fiecare proprietate separat, dupa cum urmeaza:

Atasament fundal

Daca folositi o imagine ca fundal, puteti specifica daca fundalul se misca o data cu pagina (la scroll vertical) sau este fix cu ajutorul proprietatii "background-attachment".

background-attachment: valoare;
[ul] Valori: [li]fixed[/li] [li]scroll[/li] [/ul]

Culoarea fundalului

Proprietatea "background-color" specifica culoarea fundalului:

background-color: valoare;
[ul]Posibile valori: [li]color name[/li] [li]hexadecimal number[/li] [li]RGB color cod_box[/li] [li]transparent[/li] [/ul]

Imaginea de fundal

Se poate seta o magine ca fundal al unui element, cu proprietatea "background-image".

background-image: url(calea_catre_imagine);
[ul]Valori: [li]url[/li] [li]none[/li] [/ul]

Pozitia fundalului

Imaginea folosita cu rol de fundal se poate pozitiona cu ajutorul proprietatii background-position.

background-position: valoare;
[ul]Valorile posibile sunt: [li]top left[/li] [li]top center[/li] [li]top right[/li] [li]center left[/li] [li]center center[/li] [li]center right[/li] [li]bottom left[/li] [li]bottom center[/li] [li]bottom right[/li] [li]x-% y-%[/li] [li]x-pos y-pos[/li] [/ul]

Repetarea fundalului

Se poate face ca imaginea folosita la fundal sa se repete pe axa x sau pe axa ya ecranului folosind proprietatea "background-repeat".

background-repeat: valoare;
[ul]Valori: [li]no-repeat[/li] [li]repeat[/li] [li]repeat-x[/li] [li]repeat-y[/li] [/ul]

Leave a Reply