dexblog.ro
CSS Toate proprietățile CSS

background-size, position și repeat în CSS

Culori, fundaluri și text CSS1+ / CSS3+

Controlează redimensionarea, centrarea și repetarea imaginilor de fundal.

Sintaxă CSS 
background-size: cover;       /* umple tot spațiul fără deformare */
background-size: contain;     /* tot elementul vizibil */
background-position: center;  /* centrat pe orizontală și verticală */
background-repeat: no-repeat; /* nu repeta imaginea ca o faianță */

Ce face background-size, position și repeat

Aceste trei proprietăți lucrează împreună pentru afișarea corectă a fotografiilor de fundal:

• background-size: cover: scala imaginea proporțional astfel încât să acopere integral întreaga zonă (cel mai folosit mod pentru bannere mari).
• background-size: contain: scala imaginea astfel încât să se vadă complet, fără a fi tăiată.
• background-position: center: ține punctul de interes pe mijlocul containerului.
• background-repeat: no-repeat: previne multiplicarea imaginii în mozaic.

Valori uzuale

Valoare Descriere
cover Scalează imaginea pentru a acoperi complet cutia, decupând excesul.
contain Scalează imaginea pentru a încăpea complet în cutie, fără decupare.
center Centrează imaginea de fundal.
no-repeat Afișează imaginea o singură dată.

Exemple

Exemplul 1: Configurația de aur pentru banner mare de fundal

Garantează că poza se vede frumos pe orice dimensiune de ecran.

.banner-coperta {
  background-image: url('/imagini/fundal-tehnologie.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
}

Efect vizual în browser

O zonă de 400px înălțime în care poza umple tot spațiul, rămânând centrată și netăiată ciudat.

Greșeli frecvente

  • Omiterea no-repeat când se folosește o imagine mică, ceea ce duce la repetarea ei deranjantă pe tot ecranul.

Comenzi înrudite