Corso di CSS / Colori e immagini di sfondo: cover e contain

CSS

Pubblicato 2026-11-08 Ultima modifica 2026-11-08

Gli sfondi CSS possono riempire un elemento con colore o immagine lasciando invariato il contenuto HTML. background-size: cover riempie l'area e può ritagliare l'immagine; contain mostra tutta l'immagine e può lasciare spazio inutilizzato.

Comprendere colori e immagini di sfondo

Il colore di sfondo è visibile dove non c'è immagine e dietro le aree trasparenti. Il colore di sfondo può rimanere anche quando l'immagine non è caricata. L'immagine di sfondo stessa non è il contenuto dell'elemento e non crea automaticamente l'altezza dell'elemento. Se inserisci solo l'URL dell'immagine in un div vuoto e non specifichi un'altezza, potrebbe non esserci alcuna area da visualizzare. Quando si visualizzano foto significative come contenuto HTML, confronta con l'esempio che utilizza Immagini e video responsive: aspect-ratio e object-fit.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

Se l'immagine stessa trasmette informazioni, come una foto o un diagramma esplicativo nel testo, è opportuno usare HTML img e il testo alternativo. Non puoi allegare direttamente l'attributo alt a uno sfondo CSS. Nel riquadro vuoto dell’esercizio in questa lezione, inserirai un nome accessibile che descrive i risultati del confronto, ma non è necessario aggiungere un ruolo ogni volta che si utilizza lo sfondo decorativo in un servizio reale. Non mettere le descrizioni importanti solo nell'immagine di sfondo.

Prepara l'immagine di esempio e la cartella

Apri l'immagine di sfondo di pratica 600×400 qui sotto e salvala con il nome landscape.webp. Usa gli alberi a sinistra e a destra e il cerchio centrale come oggetti di confronto. Metti l'immagine 3:2 in una scatola quadrata in modo da poter vedere facilmente dove sono ritagliate le parti.

background-practice/
  backgrounds.html
  images/
    landscape.webp

Poiché l'esempio incorpora il proprio CSS in backgrounds.html, images/landscape.webp viene risolto da quel documento HTML. Se sposti gli stili in css/style.css, usa ../images/landscape.webp per la stessa immagine. Gli URL relativi nei CSS esterni vengono risolti dal foglio di stile. Controlla anche maiuscole e minuscole nel nome del file e l’estensione effettiva. Per ulteriori dettagli, vedi MDN: background-image. Vedi Applicare CSS con stili inline, interni ed esterni.

Confronta cover e contain

valore	rapporto immagine	Risultato di mettere un'immagine 600×400 in una cornice 300×300
cover	mantieni	Ridimensiona l’immagine a 450×300 e ritaglia 75px sui lati sinistro e destro.
contain	mantieni	Riduci a 300×200, lasciando 50px in alto e in basso.
100% 100%	Le proporzioni originali possono variare	Un cerchio può essere trasformato in un ovale impostandolo a 300×300.

Queste dimensioni assumono un'area di sfondo di 300 × 300, posizionamento centrato, nessuna ripetizione e nessun bordo o padding. cover riempie l'area ritagliando parte dell'immagine; contain preserva l'intera immagine e lascia visibile il colore dello sfondo nelle aree non utilizzate. Quando l'immagine e l'area hanno lo stesso rapporto, i due risultati possono apparire identici. Vedi MDN: dimensione dello sfondo.

Il confronto schematico utilizza un formato panoramico 3:2 per illustrare i due calcoli di ridimensionamento. Con cover, i lati vengono ritagliati. Con contain, l'intera immagine rimane visibile e lo sfondo grigio appare sopra e sotto di essa. L'esempio completo permette di confrontare questi effetti con l'immagine di esercizio fornita.

Se confronti cover·contain con un semplice gradiente CSS che non ha una dimensione e un rapporto intrinseci, la differenza sarà quasi invisibile poiché riempie la stessa area. Per esercitarti nel ritaglio, usa un file immagine con dimensioni e rapporto fissi come ora.

Controlla la ripetizione e la posizione

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}

.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto imposta la larghezza a 100px e l'altezza per corrispondere al rapporto originale. repeat riempie l'area dello sfondo con una piccola immagine ripetutamente, no-repeat la visualizza solo una volta. A causa della ripetizione di base, l'immagine può essere ripetuta anche nello spazio vuoto di contain, quindi specifica no-repeat quando confronti un'immagine intera.

background-position imposta i criteri per posizionare le immagini. center divide lo spazio rimanente o la porzione ritagliata su entrambi i lati, e left top lo allinea basandosi sull'angolo in alto a sinistra. Se cambi la posizione con cover, la dimensione non cambia, ma cambia il lato che viene tagliato. L'esempio usa proprietà separate, quindi fai attenzione a non inizializzare altre impostazioni successivamente aggiungendo la proprietà abbreviata background.

Esegui l'intero esempio di sfondo

Salva il codice qui sotto come UTF-8 in backgrounds.html nella cartella preparata in precedenza e aprilo. Usa la stessa immagine nei quattro riquadri per confrontare dimensione e ripetizione. Se la finestra è stretta, la larghezza del riquadro sarà ridotta e l'altezza rimarrà a 300px, quindi anche la dimensione del ritaglio e dello spazio vuoto sarà ricalcolata.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing background image sizes</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>Comparing background images</h1>
  <h2>cover：Fill the box</h2><div class="sample cover" role="img" aria-label="Background with left and right sides cut out"></div>
  <h2>contain：Contains the entire picture</h2><div class="sample contain" role="img" aria-label="Background with empty space above and below"></div>
  <h2>repeat: small repetition</h2><div class="sample repeat" role="img" aria-label="Background with repeated small pictures"></div>
  <h2>no-repeat：Show small once</h2><div class="sample no-repeat" role="img" aria-label="Background with only one page displayed in the upper left corner"></div>
</body>
</html>

Cambia una proprietà alla volta

Assicurati negli Strumenti per sviluppatori che la finestra sia abbastanza larga in modo che le prime due caselle siano 300×300. Confronta i tagli a sinistra e a destra di cover e lo spazio in alto e in basso di contain.
Cambia solo la background-position di cover in left top. Dopo aver verificato che più alberi a sinistra siano visibili e più a destra siano tagliati, ripristina center.
Cambia background-repeat in contain in repeat. Controlla se parte dell'immagine si ripete nello spazio vuoto e ripristina su no-repeat.
Cambia le dimensioni di .no-repeat da 100px auto a 100% 100%. Controlla se le proporzioni del cerchio centrale cambiano e riportale ai valori originali.

Diagnostica immagini mancanti e ritagli imprevisti

Apri direttamente il link dell'immagine di prova per assicurarti che il file originale sia visibile. Controlla il nome del file salvato e l'estensione effettiva e calcola il percorso in base alla posizione HTML/CSS.
Ispeziona la richiesta dell'immagine nel pannello Network degli Strumenti per sviluppatori. Una risposta 404 richiede di controllare il percorso. Se la risposta ha successo ma l'immagine è invisibile, ispeziona le dimensioni della cornice e la dichiarazione background-image applicata.
Se vuoi che sia riempita senza spazi vuoti, controlla se è impostata su cover. Per mostrare l'intera immagine, specifica insieme contain e no-repeat. Se la figura si ridimensiona allo stesso modo del contenitore, la differenza tra i due valori sarà piccola.
Se stai aggiungendo uno sfondo dietro al tuo testo, assicurati che il testo sia leggibile sia nelle aree chiare sia in quelle scure. Poiché lo scopo di questa lezione è confrontare immagini, il testo esplicativo è posizionato fuori dalla casella.

Prima di allungare forzatamente l'immagine di sfondo, decidi se si tratta di un'immagine che deve essere vista nel suo insieme o di una decorazione che può essere ritagliata. Le immagini che devono essere mostrate integralmente, come foto di prodotti o diagrammi esplicativi, e gli sfondi decorativi non dovrebbero essere trattati secondo lo stesso standard.

CSS