Une image mise en arrière-plan grâce à la propriété CSS background-image ne s'étire pas, elle ne fait que se dupliquer horizontalement et verticalement par défaut. Pour réaliser un arrière-plan étirable, il faut utiliser une image (élément HTML img) et non une image de fond en CSS.
Le principe général est de donner les dimensions (hauteur et largeur) 100% à l'image, qui occupera alors toute la place de son conteneur . Ensuite, pour pouvoir afficher un texte par dessus, il faut donner une position à ce texte (absolue ou relative).
Attention: avec cette méthode, l'image risque d'être très déformée puisque les proportions (hauteur / largeur) ne sont pas respectées. Si vous voulez que les proportions soient gardées, il vous suffit de ne spécifier que la dimension qui devra s'agrandir (width ou height)… l'autre dimension va s'adapter proportionellement, mais dans ce cas n'occupera plus 100% de l'espace.
Découvrez également les possibilités offertes par CSS3 Backgrounds.
Un arrière plan sur le document entier (body)
Exemple: Arrière-plan sur le document entier
Le code CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* l'image occupe toute la place du body */
#arriere {
width : 100%;
height: 100%;
}
Le code HTML:
<img id="arriere" alt="" src="araignees.jpg" />
Un arrière plan sur un autre élément
Exemple: Arrière-plan sur un élément
Le code CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* dimension et positionnement du bloc conteneur de l'image */
#arriere {
position: absolute;
left: 10em;
top: 5em;
height : 20em;
width : 30em;
}
/* l'image occupe toute la place de son bloc conteneur */
#arriere img {
width : 100%;
height: 100%;
}
#arriere p {
position: absolute; /* placement du texte par-dessus l'image */
top: 1em;
left: 1em;
font-size: 1.5em;
color: white;
}
Le code HTML:
<body>
<div id="arriere">
<img alt="" src="image.png" />
<p>titre sur une image en arrière-plan étirée<br />
Modifiez la taille du texte avec votre navigateur: l'image suit la cadence!</p>
</div>
</body>
Code testé avec succès sur IE5+, Mozilla Firefox 0.8+ et Opera 7.23+.