Come creare un'immagine di sfondo completamente responsive utilizzando CSS senza l'uso di javaScript, sempre centrata, mantenendo le proporzioni originali e che si ridimensioni a seconda della risoluzione del browser.
Video Tutorial
Se sei possessore di un sito web ti sarà capitato di voler utilizzare, per una pagina web oppure per un singolo contenitore, un’immagine come sfondo.
In questo tutorial vedremo come utilizzare un’immagine di sfondo completamente responsive, sempre centrata, mantenendo le proporzioni originali e che si ridimensioni a seconda della risoluzione del browser.
Il tutto utilizzando proprietà CSS senza utilizzo di javaScript.
Consiglio di utilizzare due immagini.
Un’immagine di grandi dimensioni per far sì che si adatti anche a schermi molto grandi e un’immagine di dimensioni ridotte per dispositivi con schermi piccoli come gli smartphone.
Per questo tutorial utilizzerò un’immagine di 6000x3945 pixel e un’immagine di 850x559 pixel.
Fare molta attenzione ai mb perché un’immagine di molti mb rallenterà il caricamento della pagina. Io sto utilizzando un’immagine di 1,70 mb per schermi grandi e un’immagine di 140 KB per dispositivi mobili.
Per ottimizzare l’immagine esistono vari tools online come ad esempio imagecompressor.com con il quale è possibile ridurre immagini JPEG e PNG alla minima dimensione possibile mantenendo un buon livello di qualità .
Proprietà CSS
La proprietà CSS da utilizzare è background.
Come prima operazione impostare un colore di sfondo per la pagina o per l’elemento che conterrà l’immagine. Poiché questo colore verrà visualizzato durante il caricamento dell’immagine scegliere un colore che consenta all’utente, nel caso in cui stia utilizzando una connessione lenta, di poter leggere il contenuto del contenitore durante il caricamento dell’immagine.
Impostare anche un colore per il testo che sia leggibile anche dopo il caricamento dell’immagine.
Per il colore di sfondo la proprietà da utilizzare è background-color seguito dal valore colore:
background-color: #203865;
Sostituire il valore #203865 con uno a piacimento.
Dopo aver impostato il colore di sfondo si deve indicare la posizione in cui si trova l’immagine utilizzando la proprietà background-image con valore percorso dell'immagine.
Esempio proprietà background-image:
background-image: url(/demo/background-image/images/sfondo.jpg);
Sostituire /demo/background-image/images/sfondo.jpg con il percorso e nome dell'immagine.
Per un risultato ottimale l’immagine deve essere sempre centrata sia verticalmente che orizzontalmente. Per centrare l'immagine la proprietà è background-position con valore center center
background-position: center center;
Un'altra proprietà è background-repeat
Tramite la proprietà background-repeat è necessario specificare come verrà ripetuta l’immagine di sfondo. Per impostazione predefinita un’immagine di sfondo viene ripetuta sia verticalmente che orizzontalmente.
In questo caso verrà utilizzato il valore no-repeat in modo che l’immagine non venga ripetuta, quindi mostrata solo una volta.
background-repeat: no-repeat;
Se l’immagine di sfondo dovrà coprire un'intera pagina web dovrà essere fissa, cioè non dovrà scorrere con la pagina. La proprietà da utilizzare è:
background-attachment: fixed;
Altra proprietà importante è background-size con la quale si specifica la dimensione delle immagini utilizzate come sfondo. In questo caso utilizzando il valore cover l’immagine di sfondo si ridimensionerà in base alle dimensioni dell’intero contenitore.
background-size: cover;
Come consigliato precedentemente utilizzare immagini di grandi dimensioni perché con l’utilizzo della regola background-size: cover; se l’immagine è più piccola del suo contenitore quando verrà visualizzata su schermi grandi verrà ingrandita superando le sue dimensioni originali di conseguenza la sua qualità sarà molto scadente.
Infine per richiamare l’immagine da utilizzare per schermi di piccole dimensioni, come gli smartphone, si userà una regola in modo che quando la finestra del browser è larga 767px o meno verrà richiamata l’immagine di dimensioni minori. Questo per migliorare la velocità di caricamento della pagina. La regola CSS è:
@media only screen and (max-width: 767px) {
body {
background-image: url(/demo/background-image/images/sfondo-mobile.jpg);
}
}
Sostituire /demo/background-image/images/sfondo-mobile.jpg con il percorso e nome dell'immagine da utilizzare per dispositivi con schermi di piccole dimensioni.
Scarica le proprietà CSS:
Download
