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>