resizer une image de fond en fonction de la resolution

Version imprimable

Voir 40 message(s) de cette discussion en une page

26/10/2004, 22h09
Sub0

Citation:

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)... à+

re,

sinon comme ça :
Code:

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;"> 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é ! :D

L.

27/10/2004, 15h05
leris

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

++

L.
27/10/2004, 16h17
Sub0

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!
27/10/2004, 16h29
Sub0

Peut-être une piste ICI...

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

27/10/2004, 17h30
Sub0

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? :lol:

à+
27/10/2004, 17h35
SpaceFrog

oups desolé, je n'avais pas fais gaffe à l'amie molette ...
en espérant que vous n'en fassiez pas un fromage :lol:
27/10/2004, 17h41
Sub0

Citation:

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

:mouarf2:

Bizarre la sélection de texte dans la page avec ton code... :roll:
27/10/2004, 17h44
SpaceFrog

en effet ????

Code:

<body onselectstart="return false;">

et hop on n'en parle plus :lol:
02/11/2006, 14h47
bubuche87

Il existe une solution!!!!!!
Citation:

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:

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.

Voir 40 message(s) de cette discussion en une page