Fazer Background-size funcionar no internet explorer 8

[programador_09 1]

Alguém sabe algum método para fazer a propriedade backgroundsize funcionar no ie 8?

[L. Henrique 179]

Com o CSS nativo é impossível criar um background-size: cover; mas existem algumas soluções em JS ou até HTML/CSS que podem te ajudar.

Vamos a solução mais básica.
HTML:

<div class="background">
   <img src="img/background.jpg" alt="Meu background">
</div>

CSS:

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

Essas condições vão fazer com que sua imagem dentro da tag img possa se adaptar ao fundo da tela, transformando-a num background.

 

------
Agora vamos a uma outra solução com jQuery.

HTML:

<img src="img/background.jpg" alt="meu background" id="background">

CSS:

#background {
   position: fixed;
   top: 0;
   left: 0;
}

.altura-bg { height: 100%; }
.largura-bg { width: 100%; } 

JQuery:

$(window).load(function() {
   var screen = $(window),
       $bg = $('#background'),
       ratio = $background.width() / $background.height();

   function bgResize() {
      if ( ( screen.width() / screen.height() ) < ratio ) {
         $bg
            .removeClass()
            .addClass('altura-bg');
      } else {
         $bg
            .removeClass()
            .addClass('largura-bg');
      }
   }

   screen.resize(bgResize).trigger("resize");
});

Essa solução serve desde o IE 7.

------
Essa última solução, no caso, é utilizado uma library externa que pode adicionar ao seu projeto. Deixo aqui dois deles por desenvolvedores que subiram a versão no Github.

• Metafalica - Background-size emulator
• Louis Remi - Background-size polyfill