Sintassi

Significato dei valori principali:

• length: specifica la larghezza e l'altezza dello sfondo in valori assoluti (ad esempio, background-size: 100px 200px).

• percentage: imposta la larghezza e l'altezza in percentuale rispetto alle dimensioni dell'elemento (ad esempio, background-size: 50% 50%).

• cover: l'immagine di sfondo viene scalata in modo da coprire completamente l'elemento, mantenendo le sue proporzioni.

• contain: l'immagine di sfondo viene scalata in modo che entri completamente nell'elemento senza alterare le proporzioni.

Esempio proprietà: background-size

Codice Esempio: background-size

CODE: CSS

1. .background-size-example {

2.   background-image: url('https://example.com/image.jpg');

3.   background-size: cover;

4.   background-position: center;

5.   padding: 50px;

6.   color: white;

7.   font-size: 22px;

8.   text-align: center;

9.   border-radius: 10px;

10. }

Contenuto Esempio: background-size

  
  <style>
    .background-size-example {
      width: 400px;
      height: 250px;
      background-image: url('https://example.com/800x400');
      background-size: cover;           /* L'immagine copre completamente l'elemento */
      background-position: center;      /* Centra l'immagine */
      background-repeat: no-repeat;     /* Evita la ripetizione dell'immagine */
      padding: 50px;
      color: white;
      font-size: 22px;
      text-align: center;
      border-radius: 10px;
    }
  </style>
  
  <div class="background-size-example">
    Sfondo con dimensioni "cover"
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser