Faire un arrière-plan étirable
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 (balise img) et non un background en CSS. Voici une méthode...
Le principe général est de donner les dimensions 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'élargir (width OU height)... l'autre dimension va s'adapter mais dans ce cas n'occupera plus 100% de l'espace.
Un arrière plan sur le document entier (body)
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
#arriere{
/* l'image occupe toute la place du body */
width : 100%;
height: 100%;
}
-->
</style>
Le code HTML :
<img id="arriere" alt="" src="araignees.jpg" />
Un arrière plan sur un autre élément
<style type="text/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;
}
-->
</style>
</head>
<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>
</html>
Code testé avec succès sur Windows IE5, IE5.5, IE6, Mozilla Firebird 0.7, Mozilla Firefox 0.8 et Opera 7.23.
Pour info, l'astuce d'utiliser l'unité em sur les dimensions de l'image provient d'une lecture d'un article sur HTML Dog [en]
Par Raphael GOETTER - vendredi 21 mai 2004 à 10:24
Astuces - #8 - Lu 66790 fois - Intérêt du billet: 2.02(105) - Fil RSS
Trackbacks
Aucun trackback pour le moment.
Les trackbacks pour ce billet sont fermés.
Evaluez ce billet
Commentaires
Le dimanche 23 mai 2004 à 02:42, par Yeca :: site :: #
Le mercredi 26 mai 2004 à 20:28, par Soso :: site :: #
Le jeudi 27 mai 2004 à 10:03, par Raphael Goetter :: site :: #
Le jeudi 9 septembre 2004 à 18:44, par jb_gfx :: site :: #
Le mardi 14 septembre 2004 à 13:11, par trululu :: #
Le mardi 14 septembre 2004 à 13:15, par Raphael :: site :: #
Le jeudi 16 septembre 2004 à 01:39, par jb_gfx :: site :: #
Le jeudi 16 septembre 2004 à 21:14, par Laurent Denis :: #
Le jeudi 16 septembre 2004 à 22:39, par Raphael :: site :: #
Le lundi 18 octobre 2004 à 08:11, par subØ :: #
Le lundi 18 octobre 2004 à 10:45, par Raphael :: site :: #
Le samedi 23 octobre 2004 à 18:16, par myfrane :: #
Le samedi 23 octobre 2004 à 18:27, par Raphael :: site :: #
Le mardi 26 octobre 2004 à 19:49, par noone.1 :: #
Le mardi 26 octobre 2004 à 21:01, par Raphael :: site :: #
Le mardi 11 janvier 2005 à 21:50, par hablabla :: #
Le mardi 18 janvier 2005 à 02:57, par hablabla :: site :: #
Le vendredi 27 mai 2005 à 16:50, par Elo44 :: site :: #
Le vendredi 27 mai 2005 à 16:52, par Raphael :: site :: #
Ajouter un commentaire
Les commentaires pour ce billet sont fermés.