Web Design Responsiv. Imagini de fundal. Proprietatea background-size.

Susține Lectii-Virtuale!

Imagini de fundal (Background Images)

Imaginile de fundal (Background Images) pot răspunde, de asemenea, la redimensionare și scalare (resizing și scaling).

Aici vom prezenta trei metode diferite:

1. Dacă proprietatea background-size este setată pe „contain”, imaginea de fundal (background Images) se va scala și va încerca să se potrivească zonei de conținut. Cu toate acestea, imaginea își va păstra raportul de aspect (relația proporțională între lățimea și înălțimea imaginii (width și height)):



Iată codul CSS:

Exemplu:

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

2. Dacă proprietatea background-size este setată pe „100% 100%”, imaginea de fundal (background image) se va întinde pentru a acoperi întreaga zonă de conținut:



Iată codul CSS:

Exemplu:

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

3. Dacă proprietatea background-size este setată pe „cover”, imaginea de fundal (background image) se va scala pentru a acoperi întreaga zonă de conținut. Observați că valoarea „cover” păstrează raportul de aspect (aspect ratio), iar o parte din imaginea de fundal (background image) poate fi tăiată:




Iată codul CSS:

Exemplu:

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}