background-image

La proprietà css background-image serve per applicare un’immagine (png, svg, jpg, gif, webp, ecc…) o una sfumatura allo sfondo di un’elemento.

#Immagini

Utilizzare un’immagine come sfondo è molto semplice:

.elemento {
  background: url(sfondo.jpg);
}

La funzione url() consente di fornire il percorso di una qualsiasi immagine che desideri impostare come sfondo di quell’elemento.

Puoi anche impostare un URI per l’url(). Ecco un’esempio:

.elemento {
  background: url();
}

Questa tecnica evita che venga effettuata una richiesta HTTP, il che è una cosa buona, ma prima di correre a cambiare tutte le tue immagini, considera anche i lati negativi.

Puoi ridurre le richieste HTTP utilizzando anche le immagini sprite con la proprietà background-image.

#Sfumature

Un’altra opzione che si ha a disposizione con la proprietà background-image, è di impostare una sfumatura (gradient) come sfondo. Ecco un semplice esempio:

.elemento {
  background: linear-gradient(red, yellow);
}

Oltre ai gradienti lineari, ci sono anche i gradienti radiali:

.elemento {
  background: radial-gradient(circle, red, yellow);
}

Tecnicamente, i gradienti sono solo un’altra forma di immagine di sfondo. La differenza è che in questo caso è il browser a generare l’immagine.

Negli esempi appena riportati viene utilizzato un solo gradiente, ma è anche possibile sovrapporre più sfumature, una sopra l’altra. Così facendo sarà possibile ottenere fantastici risultati!

#Impostare un Colore di Ripiego

Se l’immagine di sfondo non viene caricata, o il browser dell’utente non supporta la sfumatura impostata, il browser cercherà di ripiegare su un colore di sfondo statico (fallback color). Puoi specificare il tuo colore di fallback in questo modo:

.elemento {
  background: url(sfondo.jpg) yellow;
}

#Immagini di Sfondo Multiple

Puoi impostare più immagini di sfondo, oppure un misto di immagini e sfumature per il tuo sfondo. Più immagini di sfondo sono supportate su quasi tutti i browser (da IE9 per le immagini e da IE10 per i gradienti).

Quando usi più di una immagine di sfondo, ricordati dell’ordine di sovrapposizione: l’immagine che vuoi venga visualizzata per prima, deve essere la prima della lista, la seconda dovrà essere la seconda in lista e così via. In questo modo:

.elemento {
  background: url(sfondo1.png), url(sfondo2.png);
}

Quando stai utilizzando più immagini di sfondo, potrebbe essere necessario utilizzare diversi valori per ogni immagine . Se utilizzi la proprietà background shordhand, puoi impostare i valori per ogni immagine individualmente. Ecco un esempio in cui ogni immagine e i suoi relativi valori sono separati da una virgola.

.elemento {
  background:
    url(immagine1.png) bottom center no-repeat,
    url(immagine2.png) top right repeat;
}

Non c’è limite a quante immagini di sfondo puoi impostare.

#Esempi

#Supporto dei Browser

Il numero indica la versione minima del browser in cui la feature sia supportata. Per ottenere maggiori informazioni, passare con il mouse sopra la versione.

Desktop

chrome
Google Chrome
15
firefox
Mozilla Firefox
4
ie
Internet Explorer
9
edge
Microsoft Edge
12
opera
Opera
10
safari
Apple Safari
7

Mobile / Tablet

and_chr
Android Chrome
85
and_ff
Android Firefox
79
android
Android
4.4
samsung
Samsung Internet
4
op_mob
Opera Mobile
10
ios_saf
iOS Safari
7.0

Queste statistiche sul supporto da parte dei browser provengono da Caniuse, che potete visitare per informazioni più dettagliate.