Existem diversas técnicas para obter uma imagem a ocupar toda a largura e altura do ecrã. Cada técnica é considerada adequada para determinado cenário pois podemos lidar com o problema via JavaScript, CSS ou no lado do servidor.
Nesta resposta as soluções fazem uso de JavaScript com recurso a jQuery.
jQuery
Este Plugin funciona da forma que tu indicas na pergunta, ou seja, ele faz uso de diversas imagens carregando a mais adequada consoante a largura do ecrã:
(function() {
var win = $(window);
win.resize(function() {
var win_w = win.width(),
win_h = win.height(),
$bg = $("#bg");
// Carregar imagem de fundo mais estreita com base na
// largura do ecrã, mas nunca carregar nada mais estreito
// do que o que já está carregado, se alguma coisa estiver.
var available = [
1024, 1280, 1366,
1400, 1680, 1920,
2560, 3840, 4860
];
var current = $bg.attr('src').match(/([0-9]+)/) ? RegExp.$1 : null;
if (!current || ((current < win_w) && (current < available[available.length - 1]))) {
var chosen = available[available.length - 1];
for (var i=0; i<available.length; i++) {
if (available[i] >= win_w) {
chosen = available[i];
break;
}
}
// Definir a nova imagem
$bg.attr('src', '/img/bg/' + chosen + '.jpg');
// para testar...
// console.log('Chosen background: ' + chosen);
}
// Determinar se a largura ou a altura deve ser de 100%
if ((win_w / win_h) < ($bg.width() / $bg.height())) {
$bg.css({height: '100%', width: 'auto'});
} else {
$bg.css({width: '100%', height: 'auto'});
}
}).resize();
})(jQuery);
Código retirado do web site CSS-Tricks neste artigo:
Perfect Full Page Background Image | CSS-Tricks
Muito fácil de utilizar, permite-nos transformar uma simples <img/>
numa imagem a ocupar 100% X 100% do ecrã, bem como indicar a imagem no próprio PlugIn:
Incluir o Script após a inclusão do jQuery:
<script type="text/javascript" src="/vegas/jquery.vegas.js"></script>
Incluir o CSS:
<link rel="stylesheet" type="text/css" href="/vegas/jquery.vegas.css" />
Iniciar o PlugIn:
$(function() {
$.vegas({
src:'/images/background.jpg'
});
});
Vegas - Demonstração