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

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

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, 22h56

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, 15h05

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, 16h17

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, 16h29

Peut-être une piste ICI...

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

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, 17h30

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?

à+

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

oups desolé, je n'avais pas fais gaffe à l'amie molette ...
en espérant que vous n'en fassiez pas un fromage

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

Envoyé par SpaceFrog

oups desolé, je n'avais pas fais gaffe à l'amie molette ...
en espérant que vous n'en fassiez pas un fromage

Bizarre la sélection de texte dans la page avec ton code...

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

en effet ????

Code :

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

<body onselectstart="return false;">

et hop on n'en parle plus

**bubuche87** · 02/11/2006, 14h47

Il n'existe pas d'autres solutions, je peux te l'assurer! J'ai longuement chercher sur le net. Ou alors peut-être avec PHP et la librairie GD, mais necessite de recharger la page... Peut-être aussi en utilisant "Image" de Javascript, mais ça revient au même que le second code que je t'ai donné... SpaceFrog te conseillera mieux que moi.

J'ai trouvé une solution (de moi-même en plus). Je suis nouveau sur le forum, mais j'essai d'aider les gens qui ont eut le même problème que moi. En fait ,il y avait déjà une personne qui avait donné une réponse sur ce site, mais il l'avait mal rédigé. La rédactiion correcte est:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
</head>
<body>
<div style="position:absolute"> 

ta page

</div>

<img src="url de l'image" width="100%" height="100%"/>
</body>
</html>

voila.
Le seul défaut est que tu ne peux plus dans ta page redimensionner en hauteur et en valeur absolues quoi que ce soit (en effet positionner en valeur absolue qqch désactive cette option). Il n'est abolument pas nécessaire d'indiquer des valeurs height et left. qand tu ne le fait pas, le text s'affiche à l'endroit opu il aurait du s'afficher, mais la suite s'affiche sans en tenir compte (même si elle est en dessous).

essayez de diffuser la technique plaese.

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

JavaScript

Discussions similaires

Partager

Partager