Immagine di sfondo width 100% con i CSS 3

Francesco PC Academy di - 15 aprile 2013 in Web Design

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

 

 

Share

Promozioni

Potrebbe interessarti



Francesco PC Academy
Francesco: Lavora come freelance, si occupa di Web Design & Marketing, Strategie Digitali, Blogging e docenza. Per PC Academy cura: il tutoraggio dei corsi online Scrittura Creativa e Sceneggiatura; le lezioni in aula sulla creazione del CV infografico e come Presentarsi alle Aziende in modo professionale; la redazione di molti articoli di questo portale.

Commenti