Immagine di sfondo CSS - Come aggiungere l'URL di un'immagine al tuo Div

Supponi di voler inserire una o due immagini in una pagina web. Un modo è usare la background-imageproprietà CSS.

Questa proprietà applica una o più immagini di sfondo a un elemento, come un , come spiega la documentazione. Usalo per motivi estetici, come l'aggiunta di uno sfondo con texture alla tua pagina web.

Aggiungi un'immagine

È facile aggiungere un'immagine utilizzando la background-imageproprietà. Fornisci semplicemente il percorso dell'immagine nel url()valore.

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

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

Oppure può essere un percorso locale. Ecco un esempio:

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

Aggiungi più immagini

È possibile applicare più immagini alla background-imageproprietà.

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

È un sacco di codice. Analizziamolo.

Separare ogni url()valore dell'immagine con una virgola.

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

Ora posiziona e migliora le tue immagini applicando proprietà aggiuntive.

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

Ci sono diverse proprietà secondarie che puoi aggiungere alle tue immagini di sfondo, come background-repeate background-position, che abbiamo usato nell'esempio sopra. Puoi persino aggiungere sfumature a un'immagine di sfondo.

Guarda come appare quando mettiamo tutto insieme.

Order Matters

L'ordine in cui elenchi le tue immagini è importante a causa dell'ordine di sovrapposizione. Ciò significa che la prima immagine elencata è la più vicina all'utente, secondo la documentazione. Quindi, il prossimo, e il successivo e così via.

Ecco un esempio.

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

Abbiamo elencato due immagini nel codice sopra. La prima immagine (morocco-blue.png) sarà davanti alla seconda (oriental-tiles.png). Entrambe le immagini hanno le stesse dimensioni e mancano di opacità, quindi vediamo solo la prima immagine.

Ma se spostiamo la seconda immagine (oriental-tiles.png) a destra di 200 pixel, allora puoi vederne una parte (il resto rimane nascosto).

Ecco come appare quando mettiamo tutto insieme.

Quando dovresti usare l'immagine di sfondo?

C'è molto da apprezzare sulla background-imageproprietà. Ma c'è un inconveniente.

L'immagine potrebbe non essere accessibile a tutti gli utenti, sottolinea la documentazione, come quelli che utilizzano lettori di schermo.

Questo perché non puoi aggiungere informazioni testuali alla background-imageproprietà. Di conseguenza, l'immagine verrà persa dagli screen reader.

Usa la background-imageproprietà solo quando hai bisogno di aggiungere qualche decorazione alla tua pagina. Altrimenti, usa l' elemento HTML se un'immagine ha un significato o uno scopo, come nota la documentazione.

In questo modo, puoi aggiungere del testo a un elemento dell'immagine, utilizzando l' altattributo, che descrive l'immagine. Il testo fornito verrà raccolto dagli screen reader.

Pensala in questo modo: background-imageè una proprietà CSS e CSS si concentra sulla presentazione o sullo stile; L'HTML si concentra sulla semantica o sul significato.

Quando si tratta di immagini, hai delle opzioni. Se è necessaria un'immagine per la decorazione, la background-imageproprietà potrebbe essere una buona scelta per te.

Scrivo sull'imparare a programmare e sui modi migliori per farlo ( amymhaddad.com).