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