Guida CSS interattiva: Immagine di sfondo

Q: Come aggiungo un'immagine di sfondo in CSS?

Usa background-image: url("photo.jpg"); sull'elemento. Il percorso è relativo al file CSS (o alla pagina, per un attributo style o un elemento ). Dai una dimensione all'elemento, perché uno sfondo non fa mai crescere un elemento vuoto.

Q: Come faccio a far coprire all'immagine di sfondo tutto l'elemento?

Usa background-size: cover; con background-position: center;. L'immagine si ridimensiona fino a riempire completamente il box, mantenendo le proporzioni, e ciò che avanza viene ritagliato.

Q: Che differenza c'è tra cover e contain?

cover riempie tutto il box e ritaglia ciò che non ci sta. contain mostra l'immagine intera e lascia spazio vuoto su due lati quando le proporzioni sono diverse.

Q: Come faccio a non far ripetere un'immagine di sfondo?

Aggiungi background-repeat: no-repeat;. Per impostazione predefinita un'immagine di sfondo si ripete in entrambe le direzioni per riempire l'elemento.

Q: Perché la mia immagine di sfondo non si vede?

Le cause più comuni sono un percorso sbagliato in url() (è relativo al file CSS), un elemento senza altezza perché non ha contenuto, oppure una forma abbreviata background scritta dopo che ha azzerato l'immagine.

Come aggiungere un'immagine di sfondo

background-image dipinge un'immagine dietro il contenuto, il padding e il bordo dell'elemento. Per impostazione predefinita parte dall'angolo in alto a sinistra del padding box, mantiene la sua dimensione naturale e si ripete fino a riempire il box:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

In un progetto reale url() punta a un file: url("images/hero.jpg"). Il percorso è relativo al foglio di stile che lo contiene (o alla pagina, per un elemento <style>). Gli esempi di questa pagina usano piccole immagini SVG scritte inline come URL data: così funzionano ovunque.

Due cose da sapere fin da subito:

Uno sfondo non dà dimensioni a un elemento. Un div vuoto con un'immagine di sfondo è alto 0px. Dagli del contenuto, del padding, un height o un aspect-ratio.
Un'immagine di sfondo è decorazione. Gli screen reader la saltano e non ha testo alternativo. Un'immagine che trasmette un significato va in un elemento <img>.

background-size: cover, contain e lunghezze

background-size ridimensiona l'immagine. Le due parole chiave ne mantengono le proporzioni:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

L'immagine è larga il doppio di quanto è alta e ogni box è quadrato.

Valore	Risultato
`auto` (predefinito)	La dimensione propria dell'immagine
`cover`	Si ingrandisce finché il box è completamente pieno; l'eccesso viene ritagliato
`contain`	Si ridimensiona finché l'immagine intera ci sta; restano bande grigie su due lati
`200px`	Larga 200px, altezza in proporzione
`50% auto`	Metà della larghezza del box, altezza in proporzione
`100% 100%`	Esattamente la dimensione del box; deforma l'immagine se le proporzioni sono diverse

cover è la scelta abituale per banner e schede. contain è per loghi e illustrazioni che non devono mai essere tagliati.

background-position e background-repeat

background-position colloca l'immagine dentro il box, con parole chiave (top, center, bottom, left, right), percentuali o lunghezze. background-repeat controlla la ripetizione. Prova qualche valore:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prova le posizioni top right, bottom 10px right 20px e 25% 75%, e i valori di ripetizione repeat-x, repeat-y, space (ripetizioni con spazi in modo che nessuna venga tagliata) e round (ripetizioni ridimensionate perché ne entri un numero intero).

Livelli: più sfondi e testo sovrapposto

background-image accetta un elenco separato da virgole. Il primo livello viene disegnato sopra. L'uso tipico è un gradiente semitrasparente sopra una foto, così il testo bianco resta leggibile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio dà un'altezza al box vuoto, e background-size: cover si applica a entrambi i livelli. Per altre ricette con i gradienti, vedi gradienti CSS.

La forma abbreviata background

background imposta tutte le proprietà dello sfondo in una riga. La dimensione deve venire subito dopo la posizione, separata da una barra, e il colore va nell'ultimo livello:

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

Il colore di riserva si vede mentre l'immagine si carica, e se il caricamento fallisce. Ogni proprietà che ometti dalla forma abbreviata torna al suo valore predefinito, quindi scrivi prima la forma abbreviata e dopo le proprietà singole.

Altre proprietà dello sfondo

Proprietà	Cosa fa
`background-attachment: fixed`	L'immagine resta ferma mentre la pagina scorre (ignorato su Safari per iOS)
`background-origin`	Se la posizione parte dal bordo, dal padding o dal contenuto
`background-clip`	Dove viene dipinto lo sfondo, compreso `text` per riempire le lettere
`background-blend-mode`	Fonde i livelli tra loro, per esempio con `multiply`

Errori comuni

Un percorso sbagliato. url() in un foglio di stile è relativo al file CSS, non alla pagina HTML.
Un elemento vuoto. Non ha altezza, quindi l'immagine non ha dove comparire.
Dimenticare no-repeat con contain o con un'immagine piccola: si ripete.
Deformare con 100% 100% quando intendevi cover.
Immagini importanti come sfondi. Usa <img> con testo alternativo per i contenuti; gli sfondi sono invisibili agli screen reader.
Virgolette mancanti attorno a un URL data: che contiene spazi o virgolette. Scrivi sempre url("...").

Domande frequenti

Come aggiungo un'immagine di sfondo in CSS?

Usa background-image: url("photo.jpg"); sull'elemento. Il percorso è relativo al file CSS (o alla pagina, per un attributo style o un elemento <style>). Dai una dimensione all'elemento, perché uno sfondo non fa mai crescere un elemento vuoto.

Come faccio a far coprire all'immagine di sfondo tutto l'elemento?

Usa background-size: cover; con background-position: center;. L'immagine si ridimensiona fino a riempire completamente il box, mantenendo le proporzioni, e ciò che avanza viene ritagliato.

Che differenza c'è tra cover e contain?

cover riempie tutto il box e ritaglia ciò che non ci sta. contain mostra l'immagine intera e lascia spazio vuoto su due lati quando le proporzioni sono diverse.

Come faccio a non far ripetere un'immagine di sfondo?

Aggiungi background-repeat: no-repeat;. Per impostazione predefinita un'immagine di sfondo si ripete in entrambe le direzioni per riempire l'elemento.

Perché la mia immagine di sfondo non si vede?

Le cause più comuni sono un percorso sbagliato in url() (è relativo al file CSS), un elemento senza altezza perché non ha contenuto, oppure una forma abbreviata background scritta dopo che ha azzerato l'immagine.

Concetti correlati