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

[caniuse feature=”background-img-opts”]