Fundaluri multiple CSS. Dimensiunea fundalului CSS. Valorile background-size contain și cover.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Proprietatea CSS background-size vă permite să specificați dimensiunea imaginilor de fundal.
Mărimea poate fi specificată în lungimi, procente (lengths, percentages) sau utilizând unul dintre cele două cuvinte cheie: conține sau acoperire(contain sau cover).
Următorul exemplu redimensionează background image la o dimensiune mult mai mică decât imaginea originală (folosind pixeli):
Iată codul:
Exemplu:
#div1 {
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Celelalte două valori posibile pentru background-size sunt contain și cover.Cuvântul cheie contain scalează imaginea de fundal (scales the background image) pentru a fi cât mai mare (dar atât lățimea cât și înălțimea sa trebuie să se încadreze în zona conținutului). Ca atare, în funcție de proporțiile imaginii de fundal (background image) și de zona de poziționare a fundalului, pot exista anumite zone ale fundalului care nu sunt acoperite de imaginea de fundal (background image).
Cuvântul cheie cover scalează imaginea de fundal (scales the background image) astfel încât zona de conținut să fie acoperită complet de imaginea de fundal (background image) (atât lățimea cât și înălțimea acesteia sunt egale sau depășesc aria conținutului). Ca atare, este posibil ca unele părți ale imaginii de fundal (background image) să nu fie vizibile în zona de poziționare a fundalului.
Următorul exemplu ilustrează utilizarea contain și cover:
Exemplu:
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}