immagine background tutto schermo

[Laurianti]

Salve, utilizzando background-size:cover; riesco ad ottenere l'effetto voluto.

Il problema è l'incompatibilità con Internet Explorer 8.
Ho trovato in giro in rete "sta roba":

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(
src='immagine.jpg',
sizingMethod='scale');

Il problema è che l'immagine viene estesa sulla base della grandezza della finestra del browser, quindi se si stringe, etc., l'immagine si sproporziona.
Come potrei fare? Ho già provato la soluzione di mettere un <img> in absolute, ed effettivamente ho l'effetto desiderato, ma non ha qualche contro?
Ciao e grazie

[webbeloz]

se vuoi essere sicuro al 100% sarebbe meglio piazzare un pò di Javascript, ma..
credo che questo possa andare bene:

...{
  width:100%;
  height:100%;
  background: url(tua-img.jpg) center center no-repeat;
  background-size: cover ;
}

nn ho IE sottomano, fai tu il test.

[Laurianti]

no, avevo già provato così, è il cover che non funziona su IE8

[webbeloz]

/* test eseguito IE 8,9,10 */

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

/* oppure lo fai con javascript */

[Laurianti]

Non sembra funzionare..

[Laurianti]

Nessun'altra soluzione?

[andcas]

Ciao vedi se fa al caso tuo

body
{
background: #CCC url( 'bg.jpg' ) no-repeat top center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

[ac_socmel]

@andcas io invece userei background-size: cover

[Experiment8]

Ciao,

la risposta di @webbeloz mi sembra più che corretta, e la meno pesante, sicuro che hai fatto come ha suggerito?

comunque in alternativa puoi usare backstretch, un plugin jQuery:

http://srobbin.com/jquery-plugins/backstretch/

Però prima prova prima col codice di @webbeloz, ti mostro come lo farei io (come il suo ma leggermente diverso):

Metti l'immagine dopo l'apertura del body

[img]img/tuaimmagine.jpg[/img]

e il CSS:

#full {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: auto;
  min-width: 100%;
  min-height: 100%;
}

Ciao