Tutorial Bigbos: Tutorial HTML pe intelesul tuturor,tutoriale html, coduri html, culori html, tabele, liste html, formulare, coduri muzica, coduri video, tutorial xhtml, tutorial css,Tutoriale de initiere in HTML si coduri HTML explicate

Pentru a formata background-ul elementelor HTML cu ajutorul CSS vom folosi urmatoarele atribute

- background-color
- background-image
- background-repeat
- background-attachment
- background-position

• Background solid

body { background-color: #efefef; }
h1 { background-color:red, }
p { background-color:rgb(255,0,0); }
div { background-color: black; }

Dupa cum se observa culoarea background-ului poate fi exprimata in sistemul hexadecimal, RGB sau folosind numele in engleza.

• Background imagine

Ca si valoare standard browserul va repeta imaginea pe latimea si lungimea pagini pentru a crea un background-ul:

body { background-image: url("o_imagine.gif"); }

Pentru a repeta imaginea doar pe verticala sau doar pe orizontala vom folosi urmatorul cod CSS:

body
{
background-image:url("o_imagine.gif");
background-repeat:repeat-x;
}

Aceasta functie speciala a CSS-ului se poate folosi la crearea background-urilor cu efect gradient. Pentru a repeta inaginea pe verticala in loc de "repeat-x" vom folosi "repeat-y".

Daca nu vrei ca imaginea sa se repete trebuie sa specifici acest lucru:

body
{
background-image:url("o_imagine.gif");
background-repeat:no-repeat;
}

Odata ce am specificat ca nu vrem ca imaginea sa se repede si in cazul in care nu specificam altceva browserul va adauga: background-position:top left; ca valoare standard.

• CSS - background-attachment

CSS background-attachment se foloseste pentru a pune ca background o imagine care se misca impreuna cu continutul sau pur si simplu este fixa. Sintaxa CSS ar fi urmatoarea:

body
{
background-image:url("o_imagine.png");
background-repeat:no-repeat;
background-attachment:fixed;
}

• Scurtarea codului CSS

body {
background-color:#ffffff;
background-image:url("o_imagine.gif");
background-repeat:no-repeat;
background-position:top right;
}

Tot ce am scris mai sus se poate rezuma la expresia CSS de mai jos:

body { background-color: #ffffff url("o_imagine.gif") no-repeat top right; }

Cand se foloseste varianta scurta a acestor atribute ordinea lor va fi mereu urmatoarea:

-background-color
-background-image
-background-repeat
-background-attachment
-background-position

Nu conteaza daca unul sau mai multe valori lipsesc atata timp cat se pastreaza aceasta ordine.