Corsi on-line

Background fullscreen responsive con CSS3

Nella realizzazione di siti Internet o di Web applications le cui interfacce siano basate sulla tecnica del Responsive Design, l’obiettivo è in pratica quello di ottenere un livello di visualizzazione ottimale in funzione dell’ambiente all’interno del quale vengono inserite le varie componenti di pagina; tale approccio potrebbe riguardare anche lo sfondo e il suo adattamento automatico al display del dispositivo utilizzato, un risultato ottenibile tramite l’utilizzo di alcune regole di stile CSS3.

CSS

Nell’esempio seguente vedremo come definire e determinare un background fullscreen responsive all’interno del selettore body, le direttive utilizzate permetteranno di risolvere la maggior parte delle problematiche legate alla compatibilità cross-browsing e cross-version limitatamente al supporto messo a disposizione da ciascun programma per la navigazione Web:

body {
background: url('images/sfondo.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Nello specifico, abbiamo stabilito che lo sfondo (un’immagine) non dovrà essere ripetuto più di una volta (no-repeat), inoltre, dovrà essere centrato e fisso (center center fixed); il valore cover consentirà di scalare quanto più possibile l’immagine di sfondo in modo che essa copra completamente l’area di background.

Per quanto riguarda gli utilizzatori di Internet Explorer, il supporto per le regole esposte è garantito soltanto dalla versione 9 in poi; i browser dotati di engine diversi da Trident (il motore di IE) garantiranno compatibilità attraverso la rilevazione degli appositi prefissi (ad esempio -moz- per Firefox).

Post correlati
I più letti del mese
Tematiche