Créez un impact visuel en affichant une image en arrière-plan du contenu de votre site.

Sur certains sites de la version 7.0, vous pouvez ajouter une image dʼarrière-plan à afficher derrière le contenu de votre site, créant ainsi un élément visuel qui donne du caractère à votre site.

Vous pouvez ajouter des images d’arrière-plan à l’ensemble de votre site dans ces familles de templates :

• Adirondack
• Avenue
• Aviator (la page Informations prend également en charge une image d’arrière-plan spécifique à la page)
• Five
• Forte
• Momentum
• Montauk
• Native

Toutes les images d’arrière-plan peuvent être configurées en pleine page pour occuper la page jusqu’aux bords du navigateur. Si votre template ne prend pas en charge les arrière-plans appliqués à l’ensemble du site, apprenez à créer des arrière-plans spécifiques à la page.

La version 7.1 ne prend pas en charge les images d’arrière-plan sur l’ensemble du site. Cependant, vous pouvez ajouter des images d’arrière-plan qui s’afficheront derrière le contenu de votre site sur la plupart des sections de page.

Bonnes pratiques

Vous choisirez votre type d'image en fonction de l'esthétique personnelle de votre site et de ses objectifs, mais voici quelques conseils d'ordre général :

• Nous vous recommandons de charger des images d'une largeur de 1500 pixels à 2500 pixels. Si des problèmes de chargement se produisent, tels que des images d'arrière-plan qui ne se chargent pas sur un appareil mobile, essayez de réduire le bord le plus long de toutes les images à 1500 pixels. Cela augmentera la vitesse de chargement tout en conservant la qualité de l'image.
• Les images dʼarrière‑plan en pleine page sont souvent recadrées différemment sur mobile par rapport à celles sur ordinateur. Nous vous conseillons de choisir une image dʼarrière‑plan qui peut être recadrée de différentes manières.
• Les motifs abstraits, les images sans texte ni bordures et les motifs répétitifs fonctionnent généralement de façon optimale, car elles peuvent facilement être recadrées, ce qui sera toujours nécessaire dans une certaine mesure.
• Les images d’arrière-plan ne seront pas transférées si vous changez de template.

Ajouter l’image

Pour ajouter un arrière-plan à l’ensemble du site :

1. Ouvrez le panneau Design, puis cliquez sur Styles du site.
2. Recherchez un ajustement appelé Image d’arrière-plan, Image d’arrière-plan de site ou Image d’arrière-plan de page. Cliquez sur l’ajustement pour l’ouvrir.
3. Pour ajouter un fichier enregistré sur votre ordinateur, cliquez sur lʼoutil de chargement ou faites glisser votre image dans l’outil. Cliquez sur Rechercher une image pour réutiliser une image ou ajouter une image dʼarchive.
4. Personnalisez lʼimage, puis cliquez sur Enregistrer pour publier vos modifications.

Dans Adirondack, l’ajustement ressemble à ceci :

Personnaliser et recadrer l’image

Après avoir ajouté l’image d’arrière-plan, utilisez les options sous l’outil de chargement pour personnaliser l’image et corriger les éventuels problèmes de distorsion ou de recadrage.

Taille	Automatique - L'image conserve sa largeur et sa hauteur originales. Cette option est adaptée aux petites images que vous voulez reproduire. Couvrir - Augmente la taille de l’image le plus possible dans le but de recouvrir la zone d’arrière-plan (pleine page). Par conséquent, l’image peut ne pas apparaître en entier. L’image peut apparaître différemment sur chaque page en fonction de la hauteur du contenu de la page. Contenir - Ajuste l’image pour que son côté le plus long (largeur ou hauteur) s’adapte au navigateur. Pour les options Automatique ou Contenir, la couleur d'arrière-plan apparaîtra peut-être derrière l'image. Utilisez l'outil d'ajustement Répétition pour adapter la répétition de l'image.
Position	Définissez la position de l'image d'arrière-plan : En haut à gauche, En haut au centre, En haut à droite Centre-gauche, Centre-centre, Centre-droite En bas à gauche, En bas au centre, En bas à droite
Répétition	La taille doit être définie sur Automatique ou sur Contenir. Aucune répétition - Afficher l'image une seule fois. Répétition - Reproduire l'image jusqu'à ce qu'elle recouvre l'intégralité de l'arrière-plan. Répétition-X - Reproduire l’image le long de l’axe des abscisses uniquement. Répétition-Y - Reproduire l’image le long de l’axe des ordonnées uniquement. Pour les options Ne pas répéter, Répéter-Xet Répéter-Y, utilisez les options de Position pour adapter plus précisément l'affichage de l'image.
Position fixe	Lorsque cette option est sélectionnée, la position de l’image reste fixe derrière le contenu qui défile sur la page. Si elle n’est pas sélectionnée, l’image défile vers le haut et vers le bas en même temps que la page. Ce paramètre ne fonctionne pas dans de nombreux navigateurs mobiles, notamment iOS ; l'image défilera donc en même temps que la page.

Personnaliser les autres zones du site

La part de votre image d’arrière-plan qui va s’afficher dépend de la façon dont vous disposez et configurez les autres éléments de votre site. Les options de style et les noms des ajustements varient en fonction du template, mais vous pouvez utiliser le panneau Styles du site pour tester des fonctions avec les zones suivantes de votre site :

• Arrière-plan de la zone de contenu principale (ou « zone de contenu »)
• Arrière-plan de l'en-tête
• Arrière-plan du Pied de Page
• Largeur du site et largeur du contenu

À retenir :

• Il est conseillé de définir des couleurs d’arrière-plan partiellement opaques afin que l’image d’arrière-plan soit visible.
• Une couleur d’arrière-plan ou de superposition peut s’afficher lors du chargement de l’image d’arrière-plan.

Découvrez comment votre site s’affichera sur les appareils mobiles

La même image d’arrière-plan s’affiche sur les ordinateurs et sur les appareils mobiles. Pour vous rendre compte de l’effet, gardez votre téléphone portable à portée de main et actualisez votre site après avoir enregistré les modifications sur votre ordinateur. Pour un aperçu rapide au fur et à mesure que vous apportez des modifications sur l’ordinateur, utilisez la vue par appareil.

Parce que l’image s’ajuste à l’écran d’un appareil mobile (qui est plus long et plus étroit), elle peut être rognée ou déformée. Afin de minimiser ce recadrage, effectuez les opérations suivantes :

• Lorsque vous choisissez une image d'arrière-plan, sa forme aura une influence sur la façon dont elle s'affichera sur mobile.
• Consultez nos astuces pour la résolution des problèmes afin de découvrir les paramètres de style adaptés aux appareils mobiles.

Résolution de problèmes

Mon image d’arrière-plan est déformée sur certaines pages ou sur les appareils mobiles

Cette anomalie peut se produire lorsque l’image d’arrière-plan est étirée de façon à occuper toute la longueur de la fenêtre du navigateur. Les pages Blog et les pages Événements configurées en vue Liste sont plus exposées à ce risque, car elles sont habituellement plus longues que les autres pages. Sur les appareils mobiles, la même anomalie peut se produire sur les pages dont le contenu est aligné verticalement. Plus le contenu de la page est grand, plus l’arrière-plan sera étiré pour pouvoir l’occuper en entier, et plus il apparaîtra grossi.

Pour résoudre ce problème, ouvrez l’outil d’ajustement de l’image d’arrière-plan (voir l’étape 3 ci-dessus) et essayez l’une des options ci-dessous, ou les deux :

• Vérifiez la position fixe (cela nʼaffectera pas lʼaffichage sur certains appareils mobiles, notamment les appareils iOS)
• Sélectionnez Taille : Contenir ou Taille : Automatique

Vous pouvez également tester les options de Position pour savoir quelle version offre le meilleur redimensionnement sur les longues pages et les affichages mobiles.

Mon image est floue ou pixellisée

Cette anomalie se produit lorsqu’une image est étirée au-delà de ses dimensions initiales pour occuper toute la zone d’arrière-plan.

Pour les images en pleine page, nous vous recommandons de charger des images dont la largeur est comprise entre 1 500 et 2 500 pixels pour la plupart des sites.

Remarque : nous vous déconseillons de charger des images d’arrière-plan dont le côté le plus long est supérieur à 2 500 pixels. Les images d’arrière-plan appliquées à l’ensemble du site sont toujours chargées à la dimension originale de l’image. Si la largeur de votre image d’arrière-plan est supérieure à 2 500 pixels, les visiteurs peuvent rencontrer des problèmes.

Images d'arrière-plan et code personnalisé

Le code personnalisé que vous avez ajouté à votre site peut interférer avec l’affichage de votre image d’arrière-plan. Si vous rencontrez des problèmes avec votre image d’arrière-plan, désactivez temporairement le code personnalisé afin de déterminer si le problème est lié à cela. Pour en savoir plus, consultez l’article Ajouter du code personnalisé à votre site.

Affichage mobile

Voici comment vous pouvez utiliser les outils d’ajustement de style afin de résoudre les problèmes d’affichage mobile les plus courants. Comme il n’existe pas d’outils d’ajustement distincts pour les vues mobile ou ordinateur, il est judicieux de tester ces options afin de voir lesquelles servent le mieux votre affichage.

• Image zoomée ou déformée - Définir l'image sur Taille : Contenir ou Taille : Automatique. Vous devrez peut-être utiliser une image plus grande, jusqu'à 2 500 pixels pour son plus grand côté.
• La taille de l'image d'arrière-plan change selon les pages - Définir votre image sur Taille : Contenir ou Taille : Automatique.
• L'image n'est pas correctement centrée - Utilisez les options de Position pour ajuster l'affichage de votre image sur la page.
• L’image d’arrière-plan ne s’affiche pas – Il se peut que la couleur d’arrière-plan de votre contenu principal couvre l’image. Réglez sa transparence pour rendre visible l’image d’arrière-plan. (Cette action affectera également la vue sur ordinateur.) Le bord le plus long de votre image initiale ne doit pas dépasser les 2 500 pixels. Au-delà, les images ne s’afficheront peut-être pas. Pour la famille Aviator, vérifiez que l’ajustement Image d’arrière-plan mobile est sélectionné.
• L'image ne couvre pas l'intégralité du conteneur - Sélectionnez Taille : Automatique ou Taille : Contenir et Répéter l'image pour couvrir toute zone vide.

Exemples

Testez les options de l’outil d’ajustement de l’image d’arrière-plan afin de trouver la disposition parfaite pour votre image d’arrière-plan. Vous trouverez ci-dessous quelques exemples pour vous aider à trouver l’inspiration.

Voici un exemple pour le template Montauk :

• Taille : Couverture
• Position fixe
• Arrière-plan de la zone de contenu : la couleur est définie sur partiellement opaque

Voici un exemple pour le template Forte :

• Taille : Automatique
• Répétition : Répéter

Voici un exemple pour le template Native :

• Position : En haut à gauche
• Taille : Automatique, Répéter-Y
• Couleur de l'arrière-plan du site : Bleu

Voici le template Aviator avec un arrière-plan appliqué à l’ensemble du site et un arrière-plan spécifique à la page Informations :

Ajouter des images d'arrière-plan de page

Plusieurs moyens s'offrent à vous pour créer une image d'arrière-plan qui s'affichera sur une seule page.

• Bannières : certains templates prennent en charge les images de bannière. Celles-ci s’affichent en haut de la page et peuvent accepter une superposition de contenu. Par exemple, dans la famille Brine, vous pouvez utiliser des blocs dans une zone intro pour ajouter différents types de contenus sur votre bannière.
• Pages de couverture : les pages de couverture sont disponibles dans tous les templates de la version 7.0. Elles prennent en charge le texte, les boutons, les titres, les logos et les formulaires. Elles permettent de créer une page autonome avec ses propres options de style et elles nʼaffichent pas lʼen‑tête, la navigation ou les pieds de page. Elles sont donc une excellente option pour mettre en exergue une page en particulier.
• Section Page Index – Dans les familles de templates Brine et Pacific, vous pouvez utiliser un index pour ajouter une image d’arrière-plan derrière une section de page Disposition.