$(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.
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:
CSS:
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:
.altura-bg { height: 100%; }
.largura-bg { width: 100%; }
JQuery:
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.