Quale soluzione per sfondo a tutto schermo

[starbuck]

Qual'è la soluzione migliore (compatibile con la maggior parte dei browser) per ottenere uno sfondo a tutto schermo nel body adattabile a qualsiasi dimensione della finestra senza distorcere l'immagine dello sfondo.

A dire il vero a me basterebbe mettere uno sfondo solo nella parte alta del body che riesca a coprirlo per tutta la larghezza della finestra, l'immagine nella parte bassa è sfumata quindi userei il valore della sfumatura come colore di sfondo per la parte bassa del body in modo da rendere il tutto omogeneo.


Su internet ho trovato varie soluzioni...quella più semplice é con css3 ma ha il problema della poca retroportabilità.

[codencode]

Soluzione CSS3, compatibile con Safari 3+, Chrome, IE9+, Opera 10+, Firefox 3.6+:

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;
}

Soluzione CSS2, garantito il supporto su tutti i browser moderni, IE8+ incluso:

#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%;
}

L’immagine va inserita in un contenitore che si ridimensioni a seconda della risoluzione utilizzata.

[starbuck]

Originariamente inviato da codencode
Soluzione CSS3, compatibile con Safari 3+, Chrome, IE9+, Opera 10+, Firefox 3.6+:

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;
}

Soluzione CSS2, garantito il supporto su tutti i browser moderni, IE8+ incluso:

#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%;
}

L’immagine va inserita in un contenitore che si ridimensioni a seconda della risoluzione utilizzata.

Beh più o meno sono le soluzioni che avevo visto anch'io ...la più elegante mi sembrerebbe quella con i css3...ma per i vecchi browser come potrei fare? mettere un background ad hoc?