Comment obtenir une image de fond, en plein écran, responsive ?
Mettre une image responsive en fond d'écran permet de voir cette image en permanence sur votre site, que l'on utilise un smartphone, une tablette ou un ordinateur. Pour réaliser ce procédé, il existe plusieurs techniques en CSS.
Les deux premières techniques utilisent du CSS et se basent sur une image déclarée dans une balise en HTML :
<img src=images/fondecran.jpg id=fondecran class=fondecran alt=/>
La première technique consiste à positionner l'image en haut à gauche de l'écran, à fixer sa position puis à indiquer que l'image aura toujours sa taille préservée, quelle que soit la résolution d'affichage.
#fondecran {
/* Fixe l'image en haut à gauche de la page */
position: fixed;
top: 0;
left: 0;
/* Préserve le ratio de l'image */
min-width: 100%;
min-height: 100%;
}
Cette technique ne centre pas l'image sur l'écran (elle sera toujours située en haut à gauche).
La deuxième technique consiste à positionner l'image en haut à gauche de l'écran de la même manière que précédemment. Pour qu'elle remplisse bien l'écran, fixez la hauteur minimum à toute la page (100 %) et la largeur minimum à la même largeur que celle de l'image (par exemple 1024 px). Pour que le redimensionnement soit proportionnel, la largeur est fixée à toute la page (100 %) et la hauteur doit s'adapter automatiquement (auto). Pour finir, ajoutez une mediaquery pour les écrans qui ont une largeur plus petite que celle de l'image et on ajoute une marge négative avec un positionnement à la moitié de l'écran pour que l'image soit toujours centrée.
img.fondecran {
/* On met en place le fond d'écran */
min-height: 100%;
min-width: 1024px;
/* On indique un redimensionnement proportionnel */
width: 100%;
height: auto;
/* L'image est positionnée en haut à gauche */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Le traitement est ici spécifique à l'image */
img.fondecran {
left: 50%;
margin-left: -512px; /* 50% */
}
}
La troisième technique combine du CSS avec du JavaScript et la bibliothèque JQuery. Elle se base sur une image située dans une balise <img> :
<img src=images/fondecran.jpg id=fondecran alt=>
En CSS, positionnez l'image en haut à gauche puis ajoutez 2 classes, une qui force l'image à occuper toute la largeur, l'autre pour toute la hauteur.
#fonddecran {
position: fixed;
top: 0;
left: 0;
}
.touteLaLargeur {
width: 100%;
}
.touteLaHauteur {
height: 100%;
}
En JavaScript, créez une fonction au chargement de la page via l'événement load. Cette fonction contiendra une seconde fonction qui calculera le ratio de l'image avec le ratio de la fenêtre qui l'affiche. Si le ratio de la fenêtre est inférieur au ratio de l'image, ajoutez la classe qui permettra à l'image d'occuper toute la hauteur. Si c'est l'inverse, alors ajoutez la classe qui indique à l'image d'occuper toute la largeur. Cette seconde fonction sera liée au redimensionnement de la fenêtre (événement resize).
$(window).load(function() {
var theWindow = $(window),
fond = $(#fondecran),
ratioImage = $bg.width() / $bg.height();
function redimensionnerFond() {
//On comparer le ratio de l'image à celui de la fenêtre
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$fond.removeClass().addClass('touteLaHauteur');
} else {
$fond.removeClass().addClass('bgwidth');
}
}
//On lie cette fonction au redimensionnement de la fenêtre et on déclenche l'événement
theWindow.resize(redimensionnerFond).trigger(resize);
});
Une solution en CSS3
Si vous voulez que votre développement ne soit supporté que par des navigateurs relativement récents, vous pouvez le faire tout simplement en CSS3. La propriété background-size permet de déterminer le comportement de la taille d'une image de fond. En choisissant comme valeur cover, indiquez à l'image de couvrir entièrement le fond.
html {
/* L'image est positionnée en fond et est centrée */
background: url(images/fondecran.jpg) no-repeat center center fixed;
/* Ajout de la propriété avec les préfixes pour tous les moteurs de rendu */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Cette technique fonctionne avec les navigateurs Safari (depuis la version 3), Chrome (toutes les versions), Internet Explorer (depuis la version 9), Opera (depuis la version 10), Firefox (depuis la version 3.6) et Edge.