resizer une image de fond en fonction de la resolution

Version imprimable

18/10/2004, 00h53
the_edge

resizer une image de fond en fonction de la resolution
PS: J'ai posté sur le forum HTML/CSS mais on m a dit que la reponse se trouverait du coté de javascript donc revoici la question:
bonjour, je fais un site perso avec une image de fond perso selon le modele suivant:
Code:

1 2 3 4 5 6 7 body { background-image: url(Images/fond.jpg); background-repeat : no-repeat; background-attachment : fixed; text-align: center; }
j ai donc mon image qui saffiche en fond sur ma page le probleme c est que je voudrais la redimensionner en fonction de la resolution d'ecran du poste client car sur mobn portable par exemple ca passe nikel mais si j'utilise mon poste fixe, l'image est troppetite et j ai une bande blanche en bas et a droite de l ecran ce qui fait tout moche ......
J'ai trouvé une fonction qui s appelerait resizeTo mais qui s utilise avec l'objet window.. donc je ne sais pas trop si comment cela pourrait m'aider si la solution venait de la ....
merci[/code]

Salut!

• Merci de chercher une réponse dans la FAQ Javascript
• Google.fr est ton ami! (avec "javascript background image")

L'exemple suivant sélectionne automatiquement une image parmis 5 images JPG:
640x480.jpg, 800x600.jpg, 1024x768.jpg, 1152x864.jpg et 1280x1024.jpg.
Remplace la balise <body> de ta page par le code ci-dessous:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <noscript> <body> Javascript est nécessaire pour afficher correctement cette page! </noscript> <script> tabw=new Array(640, 800, 1024, 1152, 1280); tabh=new Array(480, 600, 768, 864, 1024); if(!document.all){ w=window.innerWidth; h=window.innerHeight; } else { w=document.documentElement.offsetWidth; h=document.documentElement.offsetHeight; } for(i=tabw.length-1;i>=0;i--) if((w>=tabw[i])||(h>=tabh[i])) break; if(i<tabw.length-1) i++; document.write('<body style="background-image:url('+tabw[i]+'x'+tabh[i]+'.jpg);">'); </script>
La prochaine fois, merci de chercher un peu avant de poster!

à+

http://sub0.developpez.com/tag.png

Une autre solution pour avoir une image proportionnelle lorsqu'on redimensionne la fenêtre...
Mis au point cette nuit (je suis trop fort!!)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <html> <head> </head> <body> <img style="position:absolute;left:0px;top:0px;width:100%;height:100%;" src="test.jpg" alt=""/> <div style="position:absolute;left:0px;top:0px;width:100%;height:100%;"> Contenu de la page ici </div> </body> </html>
à+

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<?php include('menu.php'); ?>
<style type="text/css">
/*
body {
	background-image:  url(Images/fond.jpg);
	background-repeat : no-repeat;
	background-attachment : fixed;
	text-align: center;
}*/
.Style1 {
	color: #000099;
	font-style: italic;
	font-weight: bold;
}
.Style2 {
	color: #F70C22;
	font-style: italic;
	font-weight: bold;
	font face :Georgia, Times New Roman, Times, serif
}
 
 
</style>
</head>
 
 
<noscript>
<body>
Javascript est nécessaire pour afficher correctement cette page!
</noscript>
 
<script>
tabw=new Array(640, 800, 1024, 1152, 1280);
tabh=new Array(480, 600, 768,  864,  1024);
 
if(!document.all){ w=window.innerWidth; h=window.innerHeight; }
else { w=document.documentElement.offsetWidth;
       h=document.documentElement.offsetHeight; }
for(i=tabw.length-1;i>=0;i--) if((w>=tabw[i])||(h>=tabh[i])) break;
if(i<tabw.length-1) i++;
document.write('<body style="background-image:url('+tabw[i]+'x'+tabh[i]+'.jpg);">');
</script>
 
</body>
</html>

J'ai essayé ca et la j ai pas d image de fond qd a ta deuxieme solution ca ne marche pas chez moi j ai justel image en haut a droite point...

19/10/2004, 10h52
Sub0

Citation:

J'ai essayé ca et la j ai pas d image de fond

Tu n'as même pas essayer de comprendre le fonctionnement je paris!

Citation:

qd a ta deuxieme solution ca ne marche pas chez moi

Je ne vais t'aider davantage edge.
Chez moi, les 2 solutions fonctionnent.
19/10/2004, 11h01
SpaceFrog

Juste une question tu as bien 5 images différentes, une pour chaque résolution ?
19/10/2004, 11h08
the_edge

Alors Sub0 sache que si j ai essayé de comprendre le fonctionnement contrairement a ce que tu crois.... et donc j ai bien compris qu on recupérais la largeur de l ecran par la hauteur pour afficher en fond largeurXhauteur.jpg mais moi qd je fais ca il m affiche une fond blanc comme s'il ne trouvait pas l image correspondante alors que j ai bien toutes mes images stockées dans un nom au bon format avec les minuscules et tout bien comme il faut... je ne mle permet pas de poster pour récupérer des bouts de code et point barre comme ca...
Par contre ton deuxieme code je l ai pas tres bien compris je me demande s il repons pas plutot a un autre probleme qui concerne le redimensionnement de fenetre et non de definition d'ecran mais comme suis pas encore super a l aise en javascript je ne sais pas trop mais c est pas faute d avoir essayé ... et je compte bien continuer a essayer de trouver...
Maintenant je te remercie de m'avoir aidé et franchement je veux pas que tu pense que je t'exploite pour faire mon site parce que c est pas mon genre
Voila.
19/10/2004, 11h12
SpaceFrog

as tu remarqué que la balise body est entre duex balises noscript ???
ainsi si javascript n'est pas activé la balise body s'ecrit simplement tandis que si javascript est activé le premier body ne s'ecrira pas au profit du document wirte qui lui adjoint un style ...
19/10/2004, 11h29
the_edge

oui j ai remarqué ca meme en fait je suppose que si javasrpit n est pas activé la page s affiche simplement mais on devrait voir au mois qq part:

Citation:

Javascript est nécessaire pour afficher correctement cette page!

et ca je ne l ai pas
de plus je pense que javascript est activé vu que j arrive a effectuer d'autres scripts...
19/10/2004, 11h33
SpaceFrog

le plus sur c'est de nous montrer ton code intégral ...
19/10/2004, 11h41
the_edge

Il est plus haut la c est le 4eme message
19/10/2004, 11h43
the_edge

MMMmmmmmmm je crois que j ai compris en fait je me demande si c pas dans mon CSS en tete de code qui surcharge mon code javascript .... mais dans ce cas je comprens pas pas pkoi mon image de fond est toute blanche il devrait plutot m'afficher l image fond.jpg .....
faudra que je regarde toutca chez moi ce soir car la suis au boulot et donc je peut pas tester ca ....
19/10/2004, 11h46
SpaceFrog

oui commence par virer le css du body ... :?
19/10/2004, 12h47
Sub0

Ok, autant pour moi (j'ai apprecié ta réaction).

En fait, pour le 1er code, il sagit de préparer 5 images à des résolutions fixes. Le programme Javascript va alors chercher quelle est l'image qui est plus grande que la fenêtre. Ainsi, tu auras ton body qui sera toujours rempli. Si tu diminue la taille de la fenêtre, l'image s'adapte automatiquement lorsque la taille correspond à une autre résolution. J'ai testé ce code avec IE, Mozilla, NetScape et Opera, ça m'étonnerait qu'il ne fonctionne pas...

Pour le second code, effectivement, le CSS peut poser problème. Là, il sagit d'afficher une simple image avec les propriétés de style pour que l'image s'ajuste à la taille de la fenêtre. Pour pouvoir afficher d'autres éléments sur cette image, on place un DIV par dessus qui s'ajuste lui aussi à la taille de la fenêtre.

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.

à+
19/10/2004, 14h03
SpaceFrog

il reste la solution de l'image non pas en background à proprement parler mais dans un div de z-index d'arrière plan ...
20/10/2004, 16h10
the_edge

bon je persiste et signe ca marche pas chez moi meme apres avoir enlever le style body du css......
je penbse que ca vient d'ici

Code:

document.write('<body style="background-image:url('+tabw[i]+'x'+tabh[i]+'.jpg);">');

mes images se trouvent dans le repertoire Images
j ai donc essayé

Code:

document.write('<body style="background-image:url('Images/'+tabw[i]+'x'+tabh[i]+'.jpg);">');

mais ca veut pas passer non plus ..... [/code]
20/10/2004, 16h44
SpaceFrog

faut pas escaper le slash ?

Code:

'Images\/

ou mettre des antislashs?
20/10/2004, 17h41
the_edge

yess exact bien joué SF merci beaucoup :)

j essaierais ta deuxieme soluce dans qq jours SUB0 parce qu en terme de code elle me plait plus mais la ce soir j ai pas le courage merci en tout cas de votrre aide
26/10/2004, 20h42
the_edge

juste pour info ca marche nikel ta solution Sub c vraiment nikel ce que je voulais le div ca gere vachement bien :)
26/10/2004, 21h54
leris

re,

et si le contenu de la page est superieur à la hauteur visible (document.body.clientHeight / window.innerHeight) ?
tu geres comment le scrolling ?

:lol:

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

Fuseau horaire GMT +2. Il est actuellement 23h33.