Une image de fond qui s'adapte à la taille de son conteneur

Version imprimable

12/03/2008, 08h13
gifffftane

Une image de fond qui s'adapte à la taille de son conteneur

Bonjour,

Je voudrais placer une image de fond sur une div, cette image prenant automatiquement la taille de cette div ? Savez-vous comment il est possible de le faire ?

Merci pour votre aide.
12/03/2008, 09h14
SpaceFrog

si par image de fond tu entends background-image ... ce n'est pas possible, du moins pas encore ...

Tu peux parcontre mettre ton image dans le div avec un z-index approprié ..

salut
j'ai essayé avec la propriété width et height de l'objet mais ça me marchait pas. sinon on peut utiliser offsetWidth et offsetHeight.

voici un exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<head>
<style type="text/css">
div#img{
width: 100px;
height: 50px;
background-color: red;
color: yellow;
}
</style>
<script>
function process(){
	divImg = document.getElementById("img");
	width = divImg.offsetWidth;
	height = divImg.offsetHeight;
	divImg.innerHTML = 
		"<img src='http://aziatik8x.free.fr/diaporama/images/B_L_U_E__A_N_G_E_L.jpg' width="+width+" height="+height+"/>";
}
</script>
</head>
<body>
<div id="img">Image a afficher</div>
<a href="#" onClick="process();">Click here</a>
</body>

cela tient plus du css que du javascript , pour moi ce serait :

Code:

1
2
3
4
5
6
 
<div style="position:relative;width:300px;height:300px;">
<img src="tonimage" style="width:100%;height:100%;position:absolute;top:0px;left:0px;" />
 
et le reste de ton code :)
</div>

Finalement j'y suis arrivé avec z-index, un peu comme suit:
Code:

1 2 3 4 5 6 7 <div id="lateur"> <div id="fond"><img src="images/ellipse-ouverte.gif"></div> <div id="devant"> ... </div> </div> </div>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 #lateur { position: relative; } #fond { position: absolute; z-index: 1; top: 0px; left: 0px; width: 690px; height: 490px; } #fond img { margin: 0px; padding: 0px; width: 100%; height: 100%; } #devant { position: absolute; z-index: 2; top: 50px; left: 50px; width: 590px; height: 390px; }
Cela vous parait être autre chose que de la bidouille ?... c'est susceptible de passer sur tous les navigateurs ?...

Ce qui me barbe un peu est que je sois obligé de placer les hauteurs et largeurs des div. Enfin...