Comment faire un arrière-plan étirable?
Astuce par Raphael (Eleveur de kiwiz, Strasbourg)
Une image mise en arrière-plan (background-image) ne s'étire
pas, elle ne fait que se dupliquer.
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. Voici
une méthode…
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 (div, cellule,…). Ensuite, pour pouvoir afficher un texte par dessus, il faut donner une position à ce texte (absolu ou relatif).
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.
1) Un arrière plan sur le document entier (body)
Exemple: /xmedia/billets/arriere-plan2.htm
Le code CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#arriere {
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}Le code HTML:
<img id="arriere" alt="" src="araignees.jpg" />2) Un arrière plan sur un autre élément
Exemple: /xmedia/billets/arriere-plan.htm
Le code CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#arriere {
position: absolute; /* dimension et positionnement du bloc conteneur de l'image */
left: 10em;
top: 5em;
height : 20em;
width : 30em;
}
#arriere img {
/* l'image occupe toute la place de son bloc conteneur */
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 Windows IE5, IE5.5, IE6, Mozilla Firebird 0.7, Mozilla Firefox 0.8 et Opera 7.23.
