Immagine di sfondo width 100% con i CSS 3
Vi capita spesso di desiderare di realizzare uno sfondo che riempie tutto lo schermo indifferentemente dalla sua grandezza? Un’immagine che possa ingrandirsi o rimpicciolirsi a seconda delle dimensioni dello schermo che lo apre? Bene, oggi non c’è più bisogno di ricorrere a flash o javascript ma basta affidarsi ad un foglio di stile css 3.
CSS 3 – IL CODICE DA INSERIRE
Il codice sto per scrivere vi è utile nel caso volete inserire un’immagine centrale di sfondo che occupi il 100 % dello schermo senza nessuno spazio bianco.
Il codice è funzionante sui seguenti browser: Chrome, IE dalla versione 9 in su, Safari dalla versione 3 in su, Opera dalla versione 10 in su, Firefox dalla versione 3.6.
Il Codice:
html {
background: url(images/sfondo.jpg) no-repeat center center fixed;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Quindi l’attributo fondamentale in questione è: cover.
Per le versione di internet explorer antecedenti la 9 conviene inserire un commento che faccia sì che ci si appoggi ad un altro foglio di stile apposito con un codice come questo:
#container {
position:absolute;
height:100%;
width:100%;
z-index:0;
}
#container img {
position:fixed;
width:100%;
}
Potete vedere come inserire il commento che rimandi in automatico ad un foglio di stile differente non appena si riconosce che il sito è aperto da un Browser con una versione di IE precedente alla 9 cliccando qui
Promozioni
Potrebbe interessarti
Commenti