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.
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:
- Come fare una chiamata AJAX ( GET / POST )
- Selettori CSS: una guida pratica con esempi
- Cosa sono i dati strutturati SEO
- Selettori CSS WordPress: come utilizzarli
- Query WordPress: come accedere al database
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.