Faire un arrière-plan étirable

Actualité par (Intégrateur du Dimanche, Strasbourg)
Créé le , mis à jour le (148329 lectures)

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)

(voir le résultat obtenu)

<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

(voir le résultat obtenu)

<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]

Commentaires

Yeca a dit le

Hum, ça m'inspire une technique pour un affichage simple de thumbnail de photos ça :)

Soso a dit le

Ca sera pas plus simple en jouant sur les z-index ?

Raphael Goetter a dit le

@soso > le z-index n'est qu'une indication, il ne te dispense pas de positionner tes objets en absolu ou relatif, c'est juste une "sécurité" supplémentaire si tu as plein d'éléments que que tu veux déterminer un ordre d'empilement précis.
A moins que tu n'aies une autre idée ?

jb_gfx a dit le

Ouah! Ou comment faire du pseudo Flash horrible et qui pixélise bien quelque soit le système utilisé pour la visualisation! :)

Non bon je plaisante, ça pourra peut être servir un jour qui sait? En tout cas ça fonctionne bien...

trululu a dit le

La photo est à vomir.

Raphael a dit le

"La photo est à vomir."
>> Il s'agit de bestioles parfois rencontrées par les GI's américains en Irak.

jb_gfx a dit le

"Il s'agit de bestioles parfois rencontrées par les GI's américains en Irak."

Arggghh!! Je croyais que c'etait tiré d'un film de sf ou d'une série genre Stargate.. affreux!

Laurent Denis a dit le

Je me demande, sans avoir creusé la question, si on ne peut pas obtenir un image décorative d'arrière-plan étirable pure CSS par le biais d'un "content", qui aurait alors l'avantage de ne pas être dans le contenu HTML...

C'est assez facile dans opera qui applique cette propriété à la manière CSS3, c'est à dire sur tous les sélecteurs, et qui applique le positionnement sur le content généré.

Il faudrait passer par un :after ou un :before pour les Gecko, et voir si on peut le positionner et lui appliquer un z-index.

Hum... à creuser.

Raphael a dit le

@Laurent > c'est vrai que le content est une façon supplémentaire d'avoir des images pure CSS (avec background-image) et il pourrait avoir des avantages que background n'a pas.

subØ a dit le

Salut! ;) Pour obtenir une image qui s'étire avec la fenêtre...
Qu'en pensez-vous?
<html>
<head>
</head>
<body>

<img style="position:absolute;left:0px;top:0px;width:100%;height:100%;"
src="test.jpg" alt=""/>
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">

Contenu de la page ici

</div>

</body>
</html>

à+

Raphael a dit le

@subØ > C'est le même principe que le 1er exemple, à part que tu as rajouté le code pour le contenu de la page.

myfrane a dit le

Salut,
sympa ton astuce, mais étant novice en css, peux-tu m'indiquer pourquoi cela ne fonctionne pas sous netscape. Quelque chose à rajouter pour que netscape interprète correctement ?

Raphael a dit le

Je n'ai malheureusement pas Netscape pour tester, mais il ne me semble pas qu'il pose de problème par rapport aux propriétés mises en jeu dans ce code.

noone.1 a dit le

ce n'est pas une araignee et c'est un hoax :
www.hoaxbuster.com/hoaxli...

Raphael a dit le

Ah ben on en apprend des choses :)

hablabla a dit le

Merci, ça fait des semaines que je cherche comment faire un arrière plan étirable et personne ne savait le faire. ;-)

hablabla a dit le

J'ai bien suivi ces conseils pour réaliser un arrière plan étirable, ça fonctionne très bien et c'est exactement ce que je cherche depuis longtemps comme je l'ai dit dans mon précédent post. Cependant, je me heurteà un nouveau problème: lorsque le texte dépasse l'image, cette dernière n'agit finalement plus comme un arrière plan puisque le texte continue en dehors de cette image. Ce qui n'était pas le cas avec un arrière plan basique et un bgproperties=fixed ui me permettait de faire défiler le texte sur un arrière plan fixe mais un arrière plan qui ne s'adaptait malheureusement pas à la taille de la fenêtre.

page réalisée:
etudiant.univ-mlv.fr/~lpe...
Je voudrais donc savoir si il y a un moyen de concilier image étirable en arrière plan/mais avec les mêmes propiétés que bgproperties=fixed.
Merci d'avance pour vos idées

Elo44 a dit le

bonjour

je voulais utiliser ce code qui est très bien mais le seul problème c'est que quand il y a plusieurs paragraphe, ils apparaissent les uns par dessus les autres.

Pouvez vous m'aider svp.
Merci
Elo

Raphael a dit le

Elo : le blog est fait pour laisser des commentaires, pas pour ce genre de choses.

Tu as d'ailleurs déjà posté un message sur le forum : forum.alsacreations.com/t...