resizer une image de fond en fonction de la resolution [Infos]

**Sub0** · 26/10/2004, 23h09

tu geres comment le scrolling ?

Grâce au style position absolute, tu peux définir un div de n'importe quelle taille par dessus l'image, et placer l'image toujours au centre de celle-ci... J'admets aussi que c'est compliqué comme solution et faudra peut-être avoir recours au Javascript pour obtenir les bonnes valeurs de position en fonction du scroll (setInterval)... à+

**leris** · 26/10/2004, 23h56

re,

sinon comme ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<html> 
<head> 
</head> 
<body style="margin:0px;overflow:hidden;"> 
<img style="position:absolute;left:0px;top:0px;width:100%;height:100%;" 
src="carte.jpeg" alt="" /> 
<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;overflow:auto;"> 
<div style="height:1000px;"><!-- 1000 pour avoir du scroll -->
Contenu de la page ici 
</div>
</div> 
</body> 
</html>

seul prob , roulette souris inoperante sous firefox/moz et sur I.E uniquement s'il y a du "contenu" sous le pointeur. (zone "vide" = nada )

bref , c'est pas gagné !

L.

**leris** · 27/10/2004, 16h05

re,

j'ai pu colmater pour I.E en mettant en background un .gif transparent à 100% dans un des <div> , firefox ne veux toujours rien savoir .

++

L.

**Sub0** · 27/10/2004, 17h17

A mon avis, il faudra utiliser Javascript pour détecter le scroll et positionner l'image au centre de la page...
Avec les navigateurs FireFox et Mozilla, gérer carrément le scroll en JS et non en CSS...

Cela dit, le scroll fonctionne si on clique sur la page!

**Sub0** · 27/10/2004, 17h29

Peut-être une piste ICI...

**SpaceFrog** · 27/10/2004, 17h46

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
<head>
<title>Mon bouton mouvant</title>
<style type="text/css">
body{overflow:hidden;margin:0px;}
#fixed 	{position:absolute;
			 bottom:0px;
			 left:0px;
			 width:100%;
			 height:100%;
			 border : none;
			 text-align:center;
			 z-index:-1;
			 ;}
</style>
</head>
 
<body>
 
<div id="fixed">
<img src='snow.gif' style='height:100%; width:100%' />
</div>
 
<div id="cont" style="width:100%; height:100%; overflow:auto;">
 
<div style="height:1200px;">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1>Mon beau Site</h1>
<p>Amusez vous à défiler la page.</p>
 
</div>
 
</div>
 
</body>
</html>

**Sub0** · 27/10/2004, 18h30

Salut SpaceFrog!

Malgré que ton code soit excelent, je ne crois pas qu' il réponde au problème actuel.
En effet, le scroll avec la molette de la souris ne fonctionne plus avec IE.
En réalité, nous en étions à rechercher une solution pour obtenir cette fonction avec Mozilla (et Firefox).

As-tu essayé de sélectionner le texte avec ton exemple?

à+