“ Tout d’abord je tiens à préciser que cette technique fonctionne uniquement sur des navigateurs mis à jour et supportant le html5 (Safari, Firefox, Opéra, IE9 et Chrome) ! ”
Précision faite, la technique miracle est somme toute facile à maitriser ! La grosse nuance avec ce que nous avons l’habitude de faire pour mettre une image en fond d’une page, c’est surtout l’utilisation de la balise body.
Explications :
Sur une page standard, dans laquelle nous désirons mettre une image en fond, nous écrivons ceci
body {
background: url(image/monimage.jpg) no-repeat center top;
}
Maintenant, voici le ce que vous attendez tous, le code pour notre full background :
html {
background:url(images/monimage.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Et voilà ! Notre image sera automatiquement adaptée à la taille de la fenêtre du navigateur ! Et oui c’est la magie du html5 et des css3 ! Il est bien entendu essentiel de l’appliquer sur la balise html et non body pour que cela fonctionne correctement. Notez que l’on pourrait écrire :
html {
background:url(images/monimage.jpg) no-repeat center top;
background-size: cover;
}
Il est cependant préférable de préciser pour chaque navigateur (-webkit-, -moz-, -ms- et –o-) afin de maximiser la compatibilité.
Nous pouvons aussi l’utiliser sur n’importe quel élément qui s’adapterait à la taille de la fenêtre. Exemple :
div.madiv {
background:url(images/monimage.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
width : 60%;
height : 80%;
margin : 5% auto;
}
On voit que les possibilités sont diverses et il est certain qu’une fonction aussi simple à mettre en place à un bel avenir devant soit !