Background différent en fonction de la largeur du body

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par salva, 29 Janvier 2007.

  1. salva
    salva WRInaute accro
    Inscrit:
    16 Avril 2006
    Messages:
    3 425
    J'aime reçus:
    0
    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
     
  2. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 274
    J'aime reçus:
    0
    sauf que l'on a aucun moyen de connaitre la largeur du body.
     
  3. salva
    salva WRInaute accro
    Inscrit:
    16 Avril 2006
    Messages:
    3 425
    J'aime reçus:
    0
    La résolution du navigateur si tu préfères :wink:
     
  4. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    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 ?
     
  5. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 274
    J'aime reçus:
    0
    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
     
  6. salva
    salva WRInaute accro
    Inscrit:
    16 Avril 2006
    Messages:
    3 425
    J'aime reçus:
    0
    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?
     
  7. salva
    salva WRInaute accro
    Inscrit:
    16 Avril 2006
    Messages:
    3 425
    J'aime reçus:
    0
    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 :D
     
  8. e-kiwi
    e-kiwi WRInaute accro
    Inscrit:
    23 Décembre 2003
    Messages:
    13 198
    J'aime reçus:
    1
    >> 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 :)
     
  9. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 011
    J'aime reçus:
    133
    Y'aura la solution de faire un javascript onload qui transmet les infos à une page php via une requête http (vive l'Ajax).
     
  10. salva
    salva WRInaute accro
    Inscrit:
    16 Avril 2006
    Messages:
    3 425
    J'aime reçus:
    0
    J'avais trouvé ceci
    Code:
    <?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();
    
    }
    
    ?>
     
Chargement...
Similar Threads - Background différent fonction Forum Date
Changer la couleur du background d'un <tr> Développement d'un site Web ou d'une appli mobile 11 Février 2020
Ajouter une Opacité CSS sur une image en Background Développement d'un site Web ou d'une appli mobile 4 Février 2020
Comment gérer le ALT d'une image en CSS background-image YouTube, Google Images et Google Maps 17 Décembre 2019
La background image du site et la vue en cache de google Débuter en référencement 26 Mars 2018
Video en background : que faut-il en penser ? Développement d'un site Web ou d'une appli mobile 13 Septembre 2016
Background d'une cellule ou d'une div selon l'état d'un bouton radio Développement d'un site Web ou d'une appli mobile 30 Mai 2016
Publicité background possible? AdWords 13 Octobre 2015
Background image sous conditions Développement d'un site Web ou d'une appli mobile 8 Avril 2013
Problème css Habillage Background Développement d'un site Web ou d'une appli mobile 21 Mars 2013
Dimension de mon background? Développement d'un site Web ou d'une appli mobile 4 Février 2013
Impression background page html Développement d'un site Web ou d'une appli mobile 4 Juin 2012
Alt sur un background-image css. Développement d'un site Web ou d'une appli mobile 5 Mars 2012
Background-image qui ne s'affiche plus suite REDIR htaccess URL Rewriting et .htaccess 14 Décembre 2011
Css : Mettre un lien hypertexte sur un background Développement d'un site Web ou d'une appli mobile 1 Juin 2011
CSS - Ajax - Background Développement d'un site Web ou d'une appli mobile 2 Mai 2011
Ajuster en fixe son background en CSS Développement d'un site Web ou d'une appli mobile 16 Avril 2011
Background ou pas ??? Débuter en référencement 9 Mars 2011
Background publicitaire, quel coût ? Monétisation d'un site web 22 Octobre 2010
background-image ou img pour une image Développement d'un site Web ou d'une appli mobile 21 Octobre 2010
CSS 2 image en background Développement d'un site Web ou d'une appli mobile 20 Octobre 2010