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

**the_edge** · 18/10/2004, 00h53

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 :

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

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]

**Sub0** · 18/10/2004, 01h31

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 :

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

à+

**Sub0** · 18/10/2004, 07h27

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

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

à+

**the_edge** · 18/10/2004, 21h27

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

**Sub0** · 19/10/2004, 10h52

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!

qd a ta deuxieme solution ca ne marche pas chez moi

Je ne vais t'aider davantage edge.
Chez moi, les 2 solutions fonctionnent.

**SpaceFrog** · 19/10/2004, 11h01

Juste une question tu as bien 5 images différentes, une pour chaque résolution ?

**the_edge** · 19/10/2004, 11h08

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.

**SpaceFrog** · 19/10/2004, 11h12

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

**the_edge** · 19/10/2004, 11h29

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:

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

**SpaceFrog** · 19/10/2004, 11h33

le plus sur c'est de nous montrer ton code intégral ...

**the_edge** · 19/10/2004, 11h41

Il est plus haut la c est le 4eme message

**the_edge** · 19/10/2004, 11h43

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

**SpaceFrog** · 19/10/2004, 11h46

oui commence par virer le css du body ...

**Sub0** · 19/10/2004, 12h47

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.

à+

**SpaceFrog** · 19/10/2004, 14h03

il reste la solution de l'image non pas en background à proprement parler mais dans un div de z-index d'arrière plan ...

**the_edge** · 20/10/2004, 16h10

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 :

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

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 :

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

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

mais ca veut pas passer non plus ..... [/code]

**SpaceFrog** · 20/10/2004, 16h44

faut pas escaper le slash ?

Code :

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

'Images\/

ou mettre des antislashs?

**the_edge** · 20/10/2004, 17h41

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

**the_edge** · 26/10/2004, 20h42

juste pour info ca marche nikel ta solution Sub c vraiment nikel ce que je voulais le div ca gere vachement bien

**leris** · 26/10/2004, 21h54

re,

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

L.

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

JavaScript

Discussions similaires

Partager

Partager