Image de fond changeante selon la résolution du visiteur

par **Threax** le Dim 3 Oct 2010 - 15:07

Image de fond changeante selon la résolution du visiteur

Comment adapter son fond de page en fonction de la résolution du visiteur ? Cette question revient souvent dans l'Entraide, et c'est pourquoi ce tutoriel va vous l'expliquer.
Il fonctionne sous toutes les versions.

Panneau d'administration

Modules

HTML & JAVASCRIPT

Gestion des codes Javascript

Vous devez disposer de votre image de fond aux tailles suivantes :

Pensez à les héberger sous des noms pratiques : taille800, taille1024, etc.

Créer un nouveau javascript ( voir ce tutoriel ), et insérez-y ce code :

CODE:

$(function(){

  var bg= "Adresse image (largeur plus grande que 1600px)";
 
  if(screen.width < 801) bg="Adresse image (largeur 800px)";
  else if(screen.width < 1025) bg="Adresse image (largeur 1024px)";
  else if(screen.width < 1281) bg="Adresse image (largeur 1280px)";
  else if(screen.width < 1601) bg="Adresse image (largeur 1600px)";
 
  document.body.style.backgroundImage="url(\""+bg+"\")";

});

Remplacez dans ce code les parties en rouge par les URL des images adéquates.

Une fois que vous avez remplacé tous les extraits en rouge, cochez à placement "Placement" => "Sur toutes les pages" et mettez le titre que vous souhaitez puis pour finir cliquer sur le bouton valider.

Le fond de votre forum change désormais en fonction de la résolution de vos visiteurs.
Si vous souhaitez aligner votre fond au centre de l'écran, et le fixer à la page (pour qu'il ne défile pas), ajoutez ce code à votre CSS personnalisé (PA > Affichage > Couleurs > Feuille de style CSS)

Code:: body{ background-position: top center; background-repeat: no-repeat; background-attachment: fixed; }

Cette astuce a été proposée par Quierra, et améliorée par le staff du Forum des Forums.
Aucune reproduction possible sans accord, conformément à l’article L122-1 du CPI.

Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.