Comment créer un arrière-plan (backgroud) CSS extensible et adaptable ?
Depuis la version 3 du langage CSS, une nouvelle propriété adapte une image de fond à la taille indiquée en paramètre.
Le langage CSS gère les images de fond des éléments. Depuis la version 3 du langage, une nouvelle propriété, background-size, adapte une image de fond à la taille indiquée en paramètre (à consulter aussi l'astuce : Comment rendre l'arrière-plan d'un élément semi-transparent en conservant le texte de cet élément opaque en CSS ?). S'il s'agit d'un pourcentage, l'image sera étirée pour remplir le conteneur.
#monConteneur {
background-size: 100% auto; # La largeur et la hauteur sont fixées à la taille du conteneur
}
Cette propriété n'est disponible que sur les navigateurs récents. Si l'affichage doit être compatible avec des navigateurs plus anciens, il faut alors combiner plusieurs propriétés CSS et utiliser une balise <div> avec une image.
<div id=fond> <img src=img.jpg class=stretch/> </div>
Pour que l'image soit bien étirée, il faut que la division le soit. Pour cela on la place en haut à gauche avec les propriétés left et top, combinées à la propriété position définie à absolute. On agrandit la division au maximum puis on la place en fond grâce à la propriété z-index qui définit le niveau de profondeur d'un élément. Il ne reste plus qu'à étirer l'image en lui donnant la hauteur et la largeur maximum.
#fond {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
Si l'image doit être mise à l'échelle plutôt qu'étirée, il faudra remplacer les propriétés CSS de l'image par les propriétés suivantes :
.stretch {
min-width:100%;
min-height:100%;
width:auto;
height:auto;
}
Si vous préférez faire appel à du JavaScript, des plugins comme modernizr ou imgsizer possèdent ces fonctionnalités.