Ti è mai capitato di voler utilizzare un’immagine di sfondo per il tuo sito in modo che mantenesse le proporzioni originali e si ridimensionasse a seconda della risoluzione del browser? Per fare ciò non è più necessario ricorrere per forza a flash o a javascript, grazie ai CSS3 infatti, ma anche a tecniche compatibili con browser meno recenti, è possibile raggiungere un risultato sempre ottimale! Vediamo quindi una tecnica puramente CSS3 per raggiungere il nostro scopo ed una tecnica invece perfettamente funzionante css2 con un metodo per degradare il risultato in modo apprezzabile per tutti quei browser ormai molto datati (chissà di chi stiamo parlando… :))!

Sfruttiamo le potenzialità dei CSS3

Quello che possiamo ottenere con questa tecnica è un’immagine sempre centrata che occupi il 100% dello sfondo del nostro sito senza spazi bianchi, mantenendo le proporzioni originali senza creare scrollbar. Per farlo dovremo applicare la proprietà background-size con l’attributo cover al tag html:

html {  	background: url(images/background.jpg) no-repeat center center fixed;  	-moz-background-size: cover;          -webkit-background-size: cover;  	-o-background-size: cover;  	background-size: cover;  }

Il supporto per la proprietà cover è assicurato su: Safari 3+, Chrome, IE9+, Opera 10+, Firefox 3.6+ (dalla versione 4 in poi non è richiesto il prefisso -moz).
Per quanto riguarda le versioni precedenti di IE è possibile utilizzare un filtro proprietario che però NON deve essere applicato agli elementi body o html ma ad un contenitore con dimensioni fisse al 100% in larghezza ed altezza. Inoltre è stato constatato che talvolta potrebbe causare dei problemi ai link presenti nella pagina…

Un risultato simile usando CSS2

Un risultato ottimale è possibile raggiungerlo anche utilizzando solamente i CSS2, a patto però di inserire fisicamente l’immagine in un contenitore che si ridimensioni a seconda della risoluzione utilizzata.

Il CSS invece sarà:

#container {  	position:fixed;  	top:-50%;  	left:-50%;  	width:200%;  	height:200%;  }  #container img {  	position:absolute;  	top:0;  	left:0;  	right:0;  	bottom:0;  	margin:auto;  	min-width:50%;  	min-height:50%;  }

Con questa tecnica è garantito il supporto su tutti i browser moderni, IE8+ incluso.

Internet Explorer 6 ed Internet Explorer 7

Nel caso non potessi ricorrere al primo stratagemma proposto, puoi utilizzare lo stesso markup html visto sopra ed applicare, solamente per IE6/7 le seguenti proprietà CSS:

#container {  	position:absolute;  	height:100%;  	width:100%;  	z-index:0;  	}  #container img {  	position:fixed;  	width:100%;  	}

Il risultato ottenuto non sarà perfetto ma garantisce perlomeno un risultato non distruttivo. Il problema è dovuto al fatto che con questa degradazione non si controlla la posizione dell’immagine nello sfondo (prima veniva gestito dalle proprietà center e dai left-top percentuali) quindi nel caso in cui le proporzioni dell’immagine fossero diverse da quelle del monitor (per esempio immagine in 4:3 e schermo in 16:9) si avrebbero gli spazi bianchi circostanti.
Personalmente, laddove possibile utilizzerei la prima tecnica utilizzando il filtro per IE ed applicando la proprietà direttamente ad un contenitore al 100% così da salvaguardare il maggior numero di browser possibile. Nel caso si presentasse il problema con la “morte” dei link, la seconda soluzione si presenta come altrettanto valida e quindi caldamente raccomandata.
E tu che tecnica utilizzi solitamente?