Background différent en fonction de la largeur du body

[salva]

Je suis à la recherche d'un script (de préférence en javascript) qui charge un background différent (sur mon header) en fonction de la largeur du body.

Exemple:
si mon body=967px ==> charger image 967px
si mon body=776px ==> charger image 776px

Si vous avez ça dans vos bagages...
Merci

 

[Leonick]

sauf que l'on a aucun moyen de connaitre la largeur du body.

 

[salva]

sauf que l'on a aucun moyen de connaitre la largeur du body.

La résolution du navigateur si tu préfères :wink:

 

[e-kiwi]

ca doit etre assez facile a faire (un window.screen.width et un document.getbyelementid("id_de_ton_calque_a_background")), mais c est vraiment pas génial comme solution. tu ne peux pas reflechir à une facon plus propre de le faire ?

 

[Leonick]

sauf que l'on ne sais pas si le navigateur affiche une barre latérale (historique, marques pages, etc...)
Donc le mieux étant d'avoir un fond qui s'adapte

 

[salva]

Récupérer la résolution en javascript, la transmettre à Php qui lui affiche le bon background.

C'est faisable apparemment.
En php, la condition donnerait quoi?

 

[salva]

J'ai suivi tes conseils e-kiwi :wink:

J'affiche une jpg en 800 + un background de 8px de largeur en repeat-x

Tip top

 

[e-kiwi]

>> Récupérer la résolution en javascript, la transmettre à Php qui lui affiche le bon background.

et non, car le js s execute apres le php

 

[UsagiYojimbo]

>> Récupérer la résolution en javascript, la transmettre à Php qui lui affiche le bon background.

et non, car le js s execute apres le php

Y'aura la solution de faire un javascript onload qui transmet les infos à une page php via une requête http (vive l'Ajax).

 

[salva]

J'avais trouvé ceci

<?php

if (isset($_GET['largeur']) AND isset($_GET['hauteur'])) {

  // Affichage des variables

  $largeur_ecran = $_GET['largeur'];

  $hauteur_ecran = $_GET['hauteur'];

  $largeur_image_initiale = 500; //100% pour 1024px

  $hauteur_image_initiale = 200; //100% pour 768px

  echo 'largeur de l\'écran : '.$largeur_ecran.'<br/> Hauteur de l\'écran : '.$hauteur_ecran.'<br/>' ;

  $largeur_image_affiche = 500*$largeur_ecran /1024;

  $hauteur_image_affiche = 200*$hauteur_ecran/768; 

  echo 'largeur de l\'image affichée : '.$largeur_image_affiche.'px<br/> Hauteur de l\'image affichée : '.$hauteur_image_affiche.'px<br/>' ;

  

?>

		<img src="test_image.jpg" alt="" style="display: block; margin: auto; width:<?php echo $largeur_image_affiche;?>px; height: <?php echo $hauteur_image_affiche;?>px" /> 

<?php 

} else {

  // passage des variables de dimensions du java script au php par $_GET



  echo "<script type=\"text/javascript\">\n";

  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"

            . "&largeur=\" + screen.width + \"&hauteur=\" + screen.height;\n";

  echo "</script>\n";

  exit();

}

?>