Un fond qui s'adapte

à la taille de la fenêtre

  • L'image se recentre automatiquement, lorsque la fenêtre se redimensionne.
  • Le rapport largeur / hauteur de l'image est conservé : pas de déformation.
  • Si ce rapport est inférieur à celui de la fenêtre,
    alors l'image prend la largeur de la fenêtre et se recentre verticalement.
  • Si ce rapport est supérieur à celui de la fenêtre,
    alors l'image prend la hauteur de la fenêtre et se recentre horizontalement.

<script type="text/javascript">
jQuery.noConflict();
(function($) { 
  $(function() {
	// code utilisant $ comme l\'alias de JQUery

	function redim() { // Pour le navigateur qui ne reconnaît pas background-size:cover
		var $image = $("#fond").find("img")
			, format_im = $image.width() / $image.height()
			, largeur_fen = $(window).width()
			, hauteur_fen = $(window).height()
			, format_fen = $(window).width() / $(window).height();
		if (format_im < format_fen) {
			var nouvelle_hauteur = Math.ceil( largeur_fen / format_im ); // Produit en croix
			$image.css({"width": largeur_fen + "px", "height": nouvelle_hauteur + "px", "left": "0px", "top": "-"+ Math.abs( (nouvelle_hauteur - hauteur_fen)/2 ) + "px" });
		} else {
			var nouvelle_largeur = Math.ceil( hauteur_fen * format_im ); // Produit en croix
			$image.css({"height": hauteur_fen + "px", "width": nouvelle_largeur + "px", "top": "0px", "left": "-"+ Math.abs( (nouvelle_largeur - largeur_fen)/2 ) + "px" }); 
		}
	} // Fin de redim()

	$(document).ready(function(){
		var $fond = $("#fond");
		if (navigator.appVersion.indexOf("MSIE") > -1) { // Détection de MSIE
			$fond.append("<img src=/imgdo/Goldorak.jpg alt=Goldorak width=1920 height=1920 style=position:absolute;border:0; />")
				.css("opacity","0.8")
				.delay(200).stop(false,true) // NE vide PAS la file d'attente mais termine l'animation courante immédiatement
				.fadeIn(1200);
			redim(); // Au chargement de la page
			$(window).on("resize", function(e){ // En cas de redimensionnement de la fenêtre
				//if (e.type == "resize") {
					redim();
				//}
			});
		} else { // Pour les autres navigateurs, on utilise background-size
			$fond.css({"background":"url(/imgdo/Goldorak.jpg) no-repeat center fixed"
							,"-webkit-background-size":"cover"
							,"-moz-background-size":"cover"
							,"-o-background-size":"cover"
							,"background-size":"cover"
				})
				.css("opacity","0.8")
				.delay(400)
				.fadeIn(1200);
		}
	}); // Fin de ready

  });
})(jQuery);
</script>

 

Dernière mise à jour : dimanche 24 mars 2013 Design par Minh-Dung DO