Background image CSS - applicare lo sfondo

Per applicare lo sfondo ad un elemento HTML si utilizza la proprietà CSS background-image.

Utilizzando tale proprietà si può impostare lo sfondo di tutti gli elementi HTML che compongono la pagina web, incluso il tag body.

Indice

Background-image CSS: alcuni esempi

Il seguente codice imposta come sfondo l’immagine sfondo-css.jpg a tutti gli elementi HTML che corrispondono al selettore CSS .allarme.

.allarme {
 background-image: url("sfondo-css.jpg");
}

Nel caso in cui l’immagine non fosse disponibile (ad esempio, a causa di un errore 404), è possibile impostare una proprietà background-color, che sarà utilizzata dal browser solo nel caso in cui la stessa non sia reperibile.

.allarme {
 background-image: url("sfondo-css.jpg");
 background-color: red;
}

Specificare più immagini di sfondo

E’ possibile specificare più di una immagine di sfondo, sempre utilizzando la proprietà oggetto dell’articolo.

La sintassi è la seguente:

.allarme {
 background-image: url("sfondo-css.jpg"), url("altro-sfondo-css.jpg");
}

Background-repeat CSS: ripetizione sfondo

Questa proprietà, utilizzata in maniera congiunta alla proprietà oggetto di questo articolo, permette di specificare se e come l’immagine di sfondo verrà ripetuta.

Come puoi vedere nell’esempio posto qui sopra, è possibile impostare i seguenti valori per background-repeat:

repeat-x (in questo modo lo sfondo verrà ripetuto solo orizzontalmente)
repeat-y (in questo modo lo sfondo verrà ripetuto solo verticalmente)
repeat (in questo modo lo sfondo verrà ripetuto sia verticalmente che orizzontalmente)
no-repeat (in questo modo lo sfondo non verrà ripetuto)
space (in questo modo lo sfondo verrà ripetuto il più possibile senza essere ‘tagliato’. Lo spazio rimanente sarà diviso equamente tra le ripetizioni.)
round (in questo modo lo sfondo verrà ripetuto il più possibile ed eventualmente deformato affinché non ci siano spazi tra le ripetizioni.)

Background-size CSS: impostare la dimensione dello sfondo

La proprietà background-size permette di regolare la dimensione dell’immagine impostata come sfondo.

Nell’esempio sono riportati i valori più utilizzati per questa proprietà:

contain (in questo modo lo sfondo verrà allargato senza essere ritagliato o distorto. L’immagine verrà ripetuta, a meno che la proprietà no-repeat sia impostata)
cover (in questo modo lo sfondo verrà impostato per riempire completamente il contenitore, sia in altezza che in larghezza. Se le proporzioni dello sfondo non sono le stesse del contenitore, verrà ritagliato in larghezza o altezza)
solo larghezza (in questo modo lo sfondo avrà la larghezza scelta, mentre avrà l’altezza regolata per rispettare l’aspect-ratio dello sfondo)
larghezza e altezza (lo sfondo avrà la larghezza scelta e l’altezza scelta, anche se questa coppia non rispettasse l’aspect-ratio dell’immagine)

Background image CSS: sfondo animato

Utilizzando le proprietà elencate in precedenza è possibile impostare anche uno sfondo animato.

Esempio background-image animata.

Sarà sufficiente impostare il valore di background-image affinché mostri una gif.

Nell’esempio, ho impostato la regola CSS

background-image: url("https://www.dariocapozzi.it/wp-content/uploads/2023/03/background-image-css-sfondo-animato.gif");

Background image CSS: compatibilità browser

La proprietà CSS background-image è supportata da praticamente tutti i browser attuali.

Secondo caniuse.com, il 96% degli utenti di internet al livello internazionale utilizza un browser che supporta questa proprietà.

Se volessi approfondire l’uso di caniuse.com, puoi controllare l’articolo Controllare il supporto dei browser per CSS e JavaScript.

Approfondimenti

Se stai leggendo questo articolo, probabilmente sei uno sviluppatore web.

Su questo blog sono presenti numerosi articoli riguardo allo sviluppo di applicazioni web, a CSS, a JavaScript ed a WordPress.

Ecco alcuni articoli che possono interessarti:

Conclusioni

In questo articolo hai visto come impostare lo sfondo di un elemento HTML tramite la proprietà CSS background-image.

Inoltre, hai avuto modo di vedere come regolare la ripetizione di tale sfondo facendo uso della proprietà background-repeat.

Se ti interessano altri articoli come questo, ti invito a leggere le sezioni dedicate al web development ed al CSS.

Seguimi su