Nel tutorial di oggi vediamo come impostare un’immagine (bg) di sfondo a tutta pagina solamente con l’uso dei CSS3.
Quando si hanno a disposizione immagini di ottima qualità (magari studiate a posta per il progetto) l’idea di usare uno sfondo full-width con le immagini può essere una strategia efficace. Per farlo fino a poco tempo fa si era praticamente obbligati ad usare script jQuery esterni per poter rendere il tutto cross-browser compatible. Con la continua e rapida introduzione dei CSS3 è possibile usare un particolare tag per impostare lo sfondo a tutto schermo.
La soluzione che state vedendo funziona perfettamente con tutti i major browser next gen, ma con un piccolo trick è possibile estendere la funzionalità anche al “vecchio” IE8 (che tutti amiamo vero? =D).
[button link=”http://www.targetweb.it/tutorial/2012/fullpage-bg-css3/index.html” color=”blue” target=”blank” size=”large”]Visualizza la Demo[/button]
Impostazione del full page background CSS3
Per farlo ci viene in soccorso il tag background-size: cover; che di fatto:
A) Mette l’immagine in fullwidth al centro dello schermo in posizione fixed.
B) Non appare la scrollbar perchè l’immagine è fittata correttamente nello schermo.
C) Scaling automatico dell’immagine al resize.
D) Preserva le proporzioni dell’immagine. (niente stretch improvvisati e poco gradevoli).
Codice css:
html {
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Come vedete il codice css è stato applicato al documento html generale ovviamente dovrete specificare il percorso all’immagine nel tag url. Vi consiglio altresì di continuare a specificare le forzature per i vari motori di render, nel caso qualcuno usi versioni obsolete di Firefox(moz) , Chrome/Safari (webkit) e Opera(o).
Compatibilità con Internet Explorer 8
Per rendere il nostro codice compatibile con IE8 possiamo aggiungere al codice di sopra questo interessante trick css:
Codice css:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";
Purtroppo ie ci ha insegnato che con lui nulla è mai troppo semplice. Anche in questo caso se applichiamo questo trick sull’elemento css “html” noteremo che i link del sito diventeranno non cliccabili. Come fare a risolvere il problema?
Semplice, al posto di usare html come selettore creiamo un div “#background” con:
Codice css:
#background{
width:100%;
height:100%;
position:fixed;
top:0px; left:0px;
z-index:-100;
}
Per fixare il tutto aggiungete i codici css del primo capitolo e del secondo alla regola css di #background. Ovviamente ricordatevi di aggiungere nell’html il relativo markup:
Codice Html:
<body> <div id="background"></div> [..Il resto della pagina ..]
NOTA: Il div deve essere necessariamente inserito PRIMA di tutto il resto del documento.
Codice completo:
#background {
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/bg.jpg', sizingMethod='scale')";
width:100%;
height:100%;
position:fixed;
top:0px; left:0px;
z-index:-100;
}
Altre tecniche usando jQuery
Come avete visto usando qualche accorgimento è possibile rendere il codice cross-browser, (ie6/7 direi di non contarli più). Se proprio volete rendere compatibile anche per versioni precedenti a ie8 potete sempre usare il vecchio metodo jQuery ( che però è più dispendioso in termini di risorse).
Se volete intraprendere la “via” del jQuery anche se non strettamente necessario vi consiglio di usare JQuery Backstretch. Il plugin è un veterano di questa tecnica e viene continuamente aggiornato e modernizzato.
[button link=”http://srobbin.com/jquery-plugins/backstretch/” color=”blue” target=”blank” size=”large”]JQuery Backstretch[/button]
Conclusioni e download
[button link=”http://www.targetweb.it/tutorial/2012/fullpage-bg-css3/index.html” color=”blue” target=”blank” size=”large”]Demo[/button] [button link=”http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html” color=”blue” target=”blank” size=”large”]Articolo sul trick IE8[/button]
[viral-download file1=”http://www.targetweb.it/download/2012/fullpage-bg-targetweb.zip” name1=”Scarica i file!” url=”http://www.targetweb.it/immagine-come-sfondo-a-tutta-pagina-con-i-css3/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#CSS3- Background Full Page Cross-Browser CSS3″ thankyou=”Grazie per aver condiviso, clicca sul link qui sotto per scaricare:”/]
Ti è piaciuto l’articolo? Condividilo sui tuoi social network preferiti!
Grazie per la chicca.. 🙂 la metto subito in funzione.. 🙂
;);)
Oh questo mi piace assai. Certo c’e il problema che non mi sembra compatibile con ie7, ma bisogna smettere di sviluppare per browser cosi obsoleti, quindi mi sa che lo userò… grazie: 🙂
Ottima spiegazione..
ma per quanto riguarda l’immagine che viene usata c’è una risoluzione minima da tenere in considerazione giusto?
Ci sono per caso delle “fasce” nelle quali le risoluzioni sono ottimizzate per questo tutorial? tipo per esempio dagli 1280x768px in su ecc…
Grazie.
L’immagine viene fittata automaticamente in base allo schermo di render in modo proporzionale. Direi che nel 2012 consiglio di stare al di sopra dei 1280px wide. Un 1600px wide secondo me è l’ideale.
Grazie mille.
Vediamo come viene!
Bell’uso dei CSS… se solo tutti noi smettessimo (io gia lo sto facendo) di preoccuparci di versioni obsolete di IE, ma anche di quelle nuove (che tanto danno problemi come le vecchie), avremmo di sicuro dei benefici! Altrimenti tutto lo sviluppo del web, dove lo mandiamo? Piccolo appunto 🙂 nella calsse .container il margin non può essere auto (parlo della demo), oppure, se vuoi il margin in auto, devi andare nel file di bootstrap ed impostare la classe span12 con lo stesso width della classe .container
Sì Stefano entro certi limiti sì, ma non per tutti.
Oggi è peggio di ieri, il supporto ai nuovi (non)standard è ancora scarso e relegato ad alcune features e ad alcuni browser.
I vendor prefix ci salvano anche se allungano il codice e complicano la vita, ma a ben guardare nemmeno sono così male; nell’articolo si parla specificatamente di IE8 non un vecchio browser ma qualcosa nato pochi anni fa e ancora ampiamente supportato.
Personalmente scarterei a priori l’ipotesi di un’immagine a tutto schermo vista la scarsa qualità delle connessioni ad internet in Italia, ma se proprio si deve fare, comunque bisogna dare un’alternativa a chi naviga con un sistema wi-fi, magari pubblico, con il quale scaricare un’immagine di dimensioni superiori agli 80Kbyte può diventare un problema e un’immagine di 1280 per 1024 pixel pesa sicuramente di più, per non parlare poi del fatto che su un telefono con schermo di 320 per 480 pixel è comunque un casino inutile gestirla.
Insomma dovremmo chiederci se ne vale davvero la pena davvero (lo stesso discorso vale per le introduzioni in Flash).
M.
Per la mia esperienza, ho utilizzato quasi sempre questo metodo e la dimensione che ho usato per immagini di sfondo è stata 1920×1280 in modo che si veda bene a tutte le risoluzioni (se uso 1600 su un monitor grande ho del bianco intorno all’immagine di sfondo) ma con una qualità bassa dell’immagine in modo che sia meno pesante (tanto verrà coperta dal contenuto della pagina).
Per siti web di moda o comunque siti web in qui l’immagine di sfondo è il soggetto della pagina, mi sono sempre affidato al jquery Backstretch.
Articolo interessante. Certo che IE ne crea di problema. Farli capire ai “clienti”, è un altro ben problema. Non credete?
Forse il peggiore.
Quelli inesperti usano IE.
Quelli ancora più inesperti, non eseguono gli aggiornamenti e quindi anche IE non viene aggiornato. Oggi per esempio ho dovuto combattere con un IE7.
La maggior parte dei problemi, però si risolvono inserendo un corretto DTD nella pagina (per quanto riguarda problemi relativi a html o css).