Le plus délicat pour utiliser bgMAX est de trouver les sélecteurs du template qui ont une influence sur la visualisation du fond.
Pour cela, le plus simple est d'utiliser le plugin Firebug pour Firefox.
Si vous ne savez pas comment l'installer et l'utiliser, consulter cette documentation.
Méthodologie
- Indiquer dans les paramétres du module bgMAX, l'image à utiliser ainsi que la couleur de fond sous l'image. Pour la phase de réglage, il peut être judicieux d'utiliser une image et une couleur qui se détache des couleurs du site.
- Afficher votre site dans Firefox et activer Firebug
- Dérouler le contenu de <body> comme dans l'exemple ci-dessous.
Vous remarquez que votre image de fond se trouve juste en dessous dans les modes FULL et MAX. Pour les autres modes, elle est définie à l'aide d'une règle CSS pour la balise BODY.
Donc dans les 2 cas, l'image sera affichée à l'emplacement <body> de la page.
- Rechercher le sélecteur qui englobe le contenu du site (la partie centrale avec vos textes).
Lorsque vous survolez un sélecteur dans le code (ci-dessus) la partie correspondante dans le site est surlignée en bleuté. Dans l'exemple ci-dessus (template beez5), il s'agit de <div id="back">
Assurez-vous que le contenu ne fasse pas 100% de la largeur du navigateur car dans ce cas l'image au dessous ne serait pas visible.
Pour tester, vous pouvez modifier directement la largeur dans Firebug. Il faut faire un clic droit, sur le style concerné dans la colonne de droite de Firebug, pour ajouter une nouvelle propriété.
Modifier la largeur en indiquant par exemple width: 900px. Il sera sans doute nécessaire de modifier le centrage en indiquant margin: 0 auto
Vous pouvez également indiquer le nom du sélecteur et la largeur dans les paramètres du module puis réafficher la page.
Au final, il faudra reporter les bonnes valeurs dans les paramètres de bgMAX. - Normalement, vous devriez voir votre image de fond. Si ce n'est pas le cas, d'autres sélecteurs DIV doivent la masquer. Vérifier qu'aucun sélecteur entre <BODY> ou <IMG id="bgmax"> et celui du contenu, ne définisse une image ou couleur de fond.
Pour vous en assurez, cliquer sur la ligne du sélecteur puis observez la définition de son style dans la colonne de droite de Firebug. En général, il s'agit des règles commençant par le mot background.
Pour tester rapidement l'effet d'une règle, cliquez sur le petit symbole devant son nom pour l'annuler puis observez son action sur le site.
Une fois le ou les sélecteurs identifiés, il suffira d'ajouter la règle dans le code complémentaire du module bgMAX:
#all {background-image:none !important; background-color:transparent !important; }
Bien entendu le code ci-dessus est à adapter à votre cas. Si plusieurs sélecteurs sont concernés, il suffit de les indiquer en les séparant par des virgules (#selecteur1, #selecteur2)
Par sécurité, on ajoute !important pour s'assurer que notre demande soit prioritaire.
Résumé
- Le bloc contenu ne doit pas occuper la largeur totale de la fenêtre
- Tous les blocs situés entre la balise BODY et le bloc contenu ne doivent pas avoir de fond
Mes extensions