Background en fonction de la résolution d'écran

Bonjour à tous,

Je suis en train de développer un site pour un hôtel. Dans un souci esthétique, j'ai intégré une photo légèrement floutée de l'établissement en arrière-plan.

L'effet est très sympa sur mon écran mais le but serait que peu importe la résolution, le fond d'écran couvre totalement la fenêtre de navigation de l'internaute.

Pour cela, j'ai exporté près de 15 fois le même arrière-plan dans des résolutions typiques différents ; 1920x1200, 1920x180, 1366x768 et j'en passe.

Quel code JS pourrait venir charger la bonne image en fonction de la résolution ?

J'ai déjà fait ceci (J'utilise Jquery) mais ça me semble un peu lourd ...

$(document).ready(function() {
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();

	if (windowWidth >= 1920){
		var resolutionWidth = 1920;
		if(windowHeight >= 1200)
			var resolutionHeight = 1200;
		else
			var resolutionHeight = 1080;
	}
	else if (windowWidth >= 1680){
		var resolutionWidth = 1680;
		var resolutionHeight = 1050;
	}
	else if (windowWidth >= 1600){
		var resolutionWidth = 1600;
		var resolutionHeight = 900;
	}
	else if (windowWidth >= 1440){
		var resolutionWidth = 1440;
		var resolutionHeight = 900;
	}
	else if (windowWidth >= 1366){
		var resolutionWidth = 1366;
		var resolutionHeight = 768;
	}
	else if (windowWidth >= 1280){
		var resolutionWidth = 1280;
		if(windowHeight <= 768) {
			var resolutionHeight = 768;
		}else if(windowHeight <= 800) {
			var resolutionHeight = 800;
		}else if(windowHeight <= 960) {
			var resolutionHeight = 960;
		}else if(windowHeight <= 1024) {
			var resolutionHeight = 1024;
		}else{
			var resolutionHeight = 1280;
		}
	}
	else if (windowWidth >= 1152){
		var resolutionWidth = 1152;
		var resolutionHeight = 864;
	}
	else if (windowWidth >= 1024){
		var resolutionWidth = 1024;
		if(windowHeight >= 768)
			var resolutionHeight = 768;
		else
			var resolutionHeight = 600;
	}
	else {
		var resolutionWidth = 1920;
		var resolutionHeight = 1200;
	}

	var resolutionFilename = "body-bg-"+resolutionWidth+"_"+resolutionHeight+".jpg";
	var backgroundUrl = "<?= SITE_URL.CURRENT_TEMPLATE_IMAGES ; ?>"+resolutionFilename ;
	$('body').css('background',"url("+ backgroundUrl +")");	
});

pH

Salut Pierre-Henri,

Jette un coup d'oeil à cet article, ça devrait t'aider.

Merci pour ta réponse rapide !

Je suis Fan de la méthode Jquery ! Ça fonctionne à la perfection !

pH