Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Ajouter des images d’arrière-plan à l’ensemble du 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 définit le ton de votre site. Ces familles de templates vous permettent dʼajouter des images dʼarrière‑plan à lʼéchelle du site :

  • 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 à l'échelle 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.

Regarder une vidéo

Recommandations

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 comprise entre 1 500 et 2 500 pixels. 
  • 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 souvent nécessaire.
  • 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. Dans le Menu principal, cliquez sur Design, puis 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 à partir de 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ʼorigine.
  4. Personnalisez lʼimage, puis cliquez sur Enregistrer pour publier vos modifications.

Dans Adirondack, l’ajustement ressemble à ceci :

background-image-tweak.png

Personnaliser et recadrer l’image

Après avoir ajouté l'image d'arrière-plan, utilisez les options ci-dessous pour retravailler l'image et réparer toutes les distorsions et tous les problèmes de cadrage que vous pouvez rencontrer.

Size (Taille)
  • Auto (Automatique) - L'image conserve sa largeur et sa hauteur originales. Cette option est adaptée aux petites images que vous voulez reproduire.
  • Cover (Couverture) - 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 Repeat (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
  • Au centre à gauche, Au centre, Au centre à droite
  • En bas à gauche, En bas au centre, En bas à droite
Repeat (Répétition)

La taille doit être définie sur Automatique ou sur Contenir.

    • No-repeat (Ne pas répéter) - Afficher l'image une seule fois.
    • Repeat (Répéter) - Reproduire l'image jusqu'à ce qu'elle recouvre l'intégralité de l'arrière-plan.
    • Repeat-X (Répéter-X) - Reproduire l'image le long de l'axe des abscisses uniquement.
    • Repeat-Y (Répéter-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.

Fix Position (Position fixe)

Lorsque cette option est cochée, la position de l'image reste fixe derrière le contenu qui défile sur la page. Lorsque cette option n'est pas coché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 demeure 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 dans les versions du site pour ordinateur de bureau ou pour appareil mobile. Pour vous rendre compte de l’effet, gardez votre téléphone portable à portée de main et actualisez la page 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.

Conseils :

Résolution de problèmes

Mon image d'arrière-plan est déformée sur certaines pages ou des 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 aussi tester les options de Position pour voir quelle version se redimensionne plus facilement 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 à fond perdu, nous vous recommandons d'utiliser des images d'une largeur comprise entre 1 500 et 2 500 pixels pour la plupart des sites.

Remarque : nous vous conseillons de ne pas télécharger des images d'arrière-plan d'une dimension supérieure à 2 500 pixels pour leur côté le plus long. Les images d'arrière-plan applicables à tout le site sont toujours téléchargées à la dimension originale de l'image. Si votre image d'arrière-plan est plus large que 2 500 pixels, cela peut causer des problèmes à vos visiteurs.

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 vérifier si le problème est lié à cela. Pour en savoir plus, visitez la page Ajouter du code HTML, CSS et JavaScript personnalisé.

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 bureau, 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 Size: Contain (Taille : Contenir) ou Size: Auto (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 Size: Contain (Taille : Contenir) ou Size: Auto (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 l’image d’arrière‑plan visible. (Cette action affectera également la vue sur ordinateur de bureau.) 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, assurez‑vous que l’option Image d’arrière-plan mobile est cochée.
  • L'image ne couvre pas l'intégralité du conteneur - Sélectionnez Size: Auto (Taille : Automatique) ou Size: Contain (Taille : Contenir) et Repeat (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. Nous avons intégré ci-dessous quelques exemples pour vous inspirer.

Voici un exemple pour le template Montauk :

  • Taille : Cover (Couverture)
  • Position fixe
  • La couleur de l'arrière-plan de la zone de contenu est définie sur partiellement opaque

Exemple d'image d'arrière-plan sur le template Montauk.

Voici un exemple pour le template Forte :

  • Taille : Automatique
  • Répétition : Repeat (Répéter)

Exemple d'image d'arrière-plan sur le template Forte.

Voici un exemple pour le template Native :

  • Position : Top Left (En haut à gauche)
  • Size: (Taille : ) Auto (Automatique), Repeat-Y (Répéter-Y)
  • Site background color: (Couleur de l'arrière-plan du site : ) Blue (Bleu)

Exemple d'image d'arrière-plan sur le template Native.

Voici le template Aviator avec un arrière-plan applicable à tout le site et un arrière-plan spécifique à la page Informations :

Arrière-plans pour l'ensemble du site et spécifiques à la page Intro dans le template Aviator.

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 Index : Page – 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.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 49 sur 345
Ajouter des images d’arrière-plan à l’ensemble du site