Mettre une photo en fond de page (effet de parallaxe, fondu...)

Une image de fond habille vos pages d'une photo placée derrière le texte : un jardin pour un paysagiste, une salle pour un restaurant, une matière (bois, lin, pierre) pour un artisan...

1. Ajoutez la photo dans la Médiathèque : format paysage, au moins 1 920 pixels de large, plutôt calme (sans détails importants, qui seraient cachés par le texte).
2. Dans Apparence, ouvrez l'onglet Image de fond (à côté de « Bandeau »).
3. Cliquez sur Choisir une photo, sélectionnez-la puis Utiliser ce fichier.
4. Choisissez où l'Afficher : « Toutes les pages », « Accueil uniquement », « Autres pages » (toutes sauf l'accueil) ou « Jamais ».
5. Choisissez l'Effet au défilement et réglez la lisibilité (voir ci-dessous).
6. Vérifiez l'aperçu (faites défiler la page dedans pour voir l'effet), puis cliquez sur Enregistrer.

Les effets au défilement

• Parallaxe : la photo glisse plus lentement que le texte, ce qui donne une impression de profondeur. La Vitesse règle l'intensité : 40 % donne un léger effet, comme sur les sites de l'ancienne version de Vitrine Facile.
• Fixe : la photo reste immobile, le contenu défile par-dessus.
• Fondu : la photo s'estompe peu à peu quand on descend dans la page ; la Force du fondu règle jusqu'où (à 100 %, elle disparaît complètement).
• Zoom lent : la photo s'agrandit très lentement, en continu.
• Défile avec la page : la photo habille le haut de la page, défile normalement et s'efface vers le bas.

Sur téléphone, l'image reste immobile par défaut (plus fluide et plus économe) ; vous pouvez demander « Même effet » ou « Pas d'image ». Les visiteurs qui ont demandé à leur appareil de limiter les animations voient toujours l'image immobile.

Lisibilité

• Zone couverte : la photo est toujours placée derrière toute la page, depuis le haut. « Derrière le contenu » : elle apparaît entre le bandeau et le pied de page, et à travers l'en-tête, le menu, le titre des pages ou le pied de page dès que leur fond est transparent (onglet Couleurs). « Toute la page » : le titre des pages la laisse aussi deviner automatiquement.
• Fond derrière le texte : un cadre de la couleur des pages, plus ou moins transparent, autour du texte. À 0 %, le texte est posé directement sur la photo : réservez-le aux photos très claires ou voilées.
• Voile : adoucit la photo avec la couleur de fond du site, avec un réglage pour le mode clair et un pour le mode sombre.
• Flou et Noir et blanc : rendent la photo plus discrète.
• Bords : nets, en fondu vers le bas ou en vignette (fondu sur les côtés).
• Remplissage : « Photo plein écran », ou « Motif répété » pour une petite texture (papier, lin...) répétée à sa taille réelle.

Bon à savoir

• Le cadrage de la photo suit son point d'intérêt : réglez-le dans la Médiathèque (cliquez sur la photo, puis sur la partie à garder visible).
• Si votre site propose le mode sombre, vous pouvez choisir une Photo pour le mode sombre (une vue de nuit, par exemple). Sinon, la même photo est assombrie par le voile du mode sombre.
• Une période (Noël, été...) peut afficher sa propre image de fond : elle garde l'effet et les réglages de l'onglet « Image de fond ».
• Les sites repris de l'ancienne version qui avaient une photo de fond en parallaxe retrouvent automatiquement ce réglage.
• Après avoir mis une image de fond, vérifiez que les textes colorés dans l'éditeur restent bien lisibles.
• Une couleur de fond cache-t-elle la photo ? Dans l'onglet Couleurs, rendez ce fond transparent ou sans couleur (lien « Opaque » sous son nom ; voir l'article « Personnaliser les couleurs et les polices »).