Categorie
CSS Web development

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.

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 l’immagine non sia disponibile.

.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)

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