Articolo originale: CSS Background Image – How to Add an Image URL to Your Div di Amy Haddad

Tradotto e adattato da: Dario Di Cillo

Diciamo che vuoi inserire un'immagine o due in una pagina web. Un modo per farlo è utilizzare la proprietà CSS background-image.

Questa proprietà applica una o più immagini di sfondo a un elemento (ad esempio, un <div>), come spiegato nella documentazione. Puoi utilizzarla per ragioni estetiche, come per aggiungere alla tua pagina web uno sfondo con una trama.

Aggiungere un'immagine

Aggiungere un'immagine usando la proprietà background-image è molto semplice. Devi soltanto fornire il percorso dell'immagine all'interno del valore url().

Il percorso dell'immagine può essere un URL, come mostrato nell'esempio qui sotto:

div {
   /* Background pattern da Toptal Subtle Patterns */
   background-image: url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png");
   height: 400px;
   width: 100%;
}

Oppure può essere un percorso locale. Ad esempio:

body {
   /* Background pattern da Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: url("./images/oriental-tiles.png");
}

Aggiungere immagini multiple

Puoi anche applicare più di un'immagine alla proprietà background-image.

div {
/* Background pattern da Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
   background-position: right, left; 
}

È un bel blocco di codice, dividiamolo e analizziamolo.

Separa ogni url() di un'immagine con una virgola.

background-image: 
    url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
    url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");

Poi, posiziona e ottimizza le tue immagini applicando proprietà aggiuntive.

background-repeat: no-repeat, no-repeat;
background-position: right, left; 

Esistono svariate sotto-proprietà che puoi aggiungere alle tue immagini di sfondo, come background-repeat e background-position, che abbiamo usato nell'esempio precedente. Inoltre, puoi anche aggiungere dei gradienti.

Vediamo il risultato una volta messo insieme il tutto.

L'ordine è importante

L'ordine in cui elenchi le immagini è importante per via dell'ordine di sovrapposizione (stacking). Ciò vuol dire che la prima immagine in elenco è quella più vicina all'utente (come spiegato nella documentazione), e le altre si susseguono secondo l'ordine in cui sono state scritte.

Ecco un esempio:

div {
/* Background pattern da Toptal Subtle Patterns */
   height: 400px;
   width: 100%;
   background-image: 
       url("https://amymhaddad.s3.amazonaws.com/morocco-blue.png"),
       url("https://amymhaddad.s3.amazonaws.com/oriental-tiles.png");
   background-repeat: no-repeat, no-repeat;
}

La prima delle due immagini elencate in questo blocco di codice (morocco-blue.png), si troverà davanti alla seconda (oriental-tiles.png). Entrambe le immagini hanno la stessa dimensione e non hanno opacità, quindi possiamo vedere soltanto la prima immagine.

Se spostiamo la seconda immagine (oriental-tiles.png) sulla destra di 200 pixel, saremo in grado di vederne una parte (mentre la parte restante rimane nascosta).

Ecco il risultato una volta messo insieme il tutto.

Quando dovremmo usare background-image?

La proprietà background-image ha molte qualità apprezzabili, ma ci sono anche degli inconvenienti nel suo utilizzo.

Come puntualizzato nella documentazione, l'immagine potrebbe non essere accessibile a tutti gli utenti, ad esempio, quelli che fanno uso di lettori di schermo.

Ciò accade perché non è possibile aggiungere del contenuto testuale alla proprietà background-image, con il risultato che l'immagine sfugge ai lettori di schermo.

Utilizza la proprietà background-image solo quando hai bisogno di aggiungere delle decorazioni alla tua pagina. Altrimenti, se l'immagine ha un significato o uno scopo, usa l'elemento HTML <img>, come suggerito nella documentazione.

In questo modo, puoi aggiungere del testo all'elemento <img> tramite l'attributo alt, che descrive l'immagine. Il testo fornito verrà rilevato dai lettori di schermo.

<img class="house" 
       src="./images/farnsworth_house.jpeg"
       alt="A glass house designed by Ludwig Mies van der Rohe located in Plano, Illinois.">

Pensa in questo modo: background-image è una proprietà CSS, e il CSS si focalizza sulla presentazione e lo stile di una pagina, mentre l'HTML si concentra sulla semantica e la struttura.

Quando si tratta di immagini, hai due opzioni: se l'immagine è una decorazione, allora la proprietà background-image potrebbe essere una buona scelta.