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

**gifffftane** · 12/03/2008, 08h13

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.

**SpaceFrog** · 12/03/2008, 09h14

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é ..

**htr999** · 12/03/2008, 09h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**le_chomeur** · 12/03/2008, 09h28

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**gifffftane** · 12/03/2008, 13h44

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JavaScript

Discussions similaires

Partager

Partager