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