CSS: immagine di sfondo a tutto schermo

I siti web con immagine di sfondo a tutto schermo sono di sicuro molto eleganti e di grande effetto, perchè allargano la percezione dello spazio dietro ai contenuti principali, e se le fotografie sono "d’autore", il layout può essere minimalista e lasciar parlare solamente le immagini.

Vediamo di seguito non solo come impostare una immagine di sfondo, ma anche come fare affinchè l’immagine si adatti alla pagina del browser, senza usare javascript, ma solo CSS.

Immagine di sfondo al 100%

Sia il corpo della pagina che l’immagine (con id=”sfondo”) hanno larghezza e altezza di 100%, il margin e il padding sono azzerati.
Con la proprietà overflow evitiamo che vengano visualizzate le barre di scorrimento della finestra del browser. L’immagine è posizionata in modo assoluto per toglierla del flusso naturale della pagina e potere essere ridimensionata correttamente.

Ecco il codice HTML…

…a cui associamo queste riche di CSS:

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#sfondo{
	position:absolute;
	height:100%;
	width: 100%;
	margin: 0;
	padding: 0;
}

Ecco come appare il nostro esempio.

Immagine di sfondo scalabile

Un limite dell’esempio precedente è che l’immagine, adattandosi alla dimensione della pagina, di fatto si distorce. Vediamo come poter aggirare il problema.
Inseriamo in pagina questo:

Ed ecco come impostare il CSS relativo:

html, body, #bg, #bg table, #bg td {
	height:100%;
	overflow:hidden;
	width:100%;
}

#bg div {
	height:200%;
	left:0;
	position:absolute;
	top:0; 
	width:200%;
}

#bg img {
	margin:0 auto;
	min-height:50%;
	min-width:50%;
}

#bg td {
	text-align:left;
	vertical-align:top;
}

Per vedere il risultato, ecco la pagina di esempio.

jQuery: Immagine di sfondo scalabile!

Ecco un aggiornamento al post con il quale segnalo un semplice plugin di jQuery che permette di aggiungere un’immagine di sfondo ridimensionata dinamicamente a una pagina qualsiasi. L’immagine verrà allunagata per adattarsi alla pagina, e verrà automaticamente ridimensionata quando l’utente cambia la dimensione della finestra.
Il plugin si chiama jQuery Backstretch, ed ecco come inserirlo:

Lo script inserisce un div posizionato fixed (contenente l’immagine di sfondo) subito dopo il tag body:
il plugin quindi non è compatibile con IE6, dato che quest’ultimo non interpreta correttamente la proprietà fixed.

Ecco allora un trick da utilizzare per ottenere un cross-browsing completo (se avete qualche altro consiglio/seganalzione sul codice seguente, aggiungete un commento!).
Dichiarariamo solo per IE6 l’immagine di sfondo del body, attraverso un commento condizionale, direttamente in pagina:

…e attiviamo il plugin per tutti i browser, tranne IE6, con la seguente dichiarazione:

jQuery.each(jQuery.browser, function(i) {
  if($.browser.msie && $.browser.version <= 6 )
    { /*Se il browser è uguale a IE6: Non fare niente*/ }
  else
  { /*Altrimenti: Esegui il plugin*/
    $.backstretch("images/immagineDiSfondojpg");}
  })