Résolution et fond d'écran : adaptation. Outils webmaster. Trucs et astuces

RESOLUTION ET FOND D'ECRAN

Outils pour webmaster. Trucs et astuces en code HTML, JavaScript, PHP : améliorer son site internet

Descriptif : adaptez votre fond d'écran suivant la résolution de votre visiteur grâce à JavaScript.
Bien souvent vous disposez une image en fond d'écran ayant des dimensions fixes. Mais vos visiteurs ayant des résolutions différentes, il est nécessaire d'adapter cette image car votre magnifique coucher de soleil en 640x480 va se trouver multiplié par 3 soleils en 1024x768. D'autres images rendront illisible le texte présent sur l'écran car se recoupant l'une l'autre. Il est indispensable, lors de l'élaboration de votre site, de le tester en au moins deux résolutions, celles qui correspondent à la majorité des équipements actuels.
Quelles résolutions choisir ? Visitez les statistiques d'Outils pour Webmaster vous y trouverez les résolutions d'écrans des visiteurs sur une période de 40 jours.

Mise en oeuvre : Sélectionnez le code ci-dessous (copie automatique dans le presse-papiers) et collez-le dans votre page, code HTML visible.

Entre les deux balises <head> et </head>

Vous devez ensuite retravailler votre image de fond d'écran dans les différentes dimensions que vous souhaitez. Par exemple si vous avez une image en forme de bande dont les dimensions sont 800 de large par 15 de haut, vous devez, à l'aide d'un logiciel de Dessin Assisté par Ordinateur (DAO), la modifier en, par exemple 640x15, 1024x15 et la sauvegarder sous 3 noms différents (640.jpg, 800.jpg et 1024.jpg).

Puis, vous allez enregistrer 3 fichiers ayant pour nom :
640.css et contenant la ligne body {background-image:url("640.jpg");}
800.css et contenant la ligne body {background-image:url("800.jpg");}
1024.css et contenant la ligne body {background-image:url("1024.jpg");}

Ainsi, le script détectera la résolution d'écran de votre visiteur et chargera le fichier correspondant. Si votre image est un peu lourde à charger, pensez à mettre une couleur unie pour votre fond d'écran, se rapprochant de la dominante de votre image/fond, qui s'affichera avant votre image que vous pourrez centrer si cela est nécessaire, tel que :

body {bgcolor-color:#FFEBCD;
background-image:url("800.jpg");
background-position: center}

Retour