11522 sujets

JavaScript, DOM et API Web HTML5

Choisir la résolution de l'image de fond à charger [resolu]

Bonjour,
comme le titre l'indique, je voudrais charger l'image de fond de mon site en fonction de la résolution de l'écran client.
J'avais bien imaginé détecter la taille de l'cran pour ca j'ai ce qui faut, mais je ne vos pas comment charger uniquement l'image désiré dans ma page.

<div id="headArea" style="background-image: url(http://www.sensationvoile.fr/gfx/Header.png); background-repeat: no-repeat; background-position: 0px 0; text-align: left; visibility: visible; display: block; margin: 10px auto 0; position: relative; ">

Si quelqu'un a une piste...
merci Smiley biggrin
Modifié par Joebarboat (06 Oct 2009 - 10:53)
Bonjour,

Voici le code que j'utilise sur un de mes sites (celui sur le WWW) : 
<script type="text/javascript">
  <!--
  if(screen.width < 801) document.body.style.backgroundImage="url('img/bg_800.jpg')";
  else if(screen.width < 1025) document.body.style.backgroundImage="url('img/bg_1024.jpg')";
  if(screen.width < 1281) document.body.style.backgroundImage="url('img/bg_1280.jpg')";
  if(screen.width < 1601) document.body.style.backgroundImage="url('img/bg_1600.jpg')";
  else document.body.style.backgroundImage="url('img/bg_2000.jpg')";
  //-->
</script>

À placer, bien sûr en fin de document HTML (avant </body>).

Une image "par défaut" (normalement la plus petite, si je me souvient bien) est bien sûr définie en CSS pour body dans le fichier css global du site.

Si tu cherche à cibler un élément de la page il suffit de remplacer body par "getElementById("id_de_ton_élément")", mais je te conseille d'éviter les styles inline, rassemble les dans un ficheir séparé.
Sujet clos
Aller à