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

Les images d’arrière-plan s’affichent derrière le contenu. Elles permettent d’ajouter 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 modèles :

  • 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

All background images can be set to full-bleed, so they fill the page to the edges of the browser.

Astuce : si votre template ne prend pas en charge les arrière-plans de site, apprenez à créer des arrière-plans de page.
Version 7.1 doesn't support site-wide background images.

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 :

  • For full-bleed background images, we recommend uploading images at a width of 1500 pixels to 2500 pixels.
  • Les images à motifs abstraits et les images sans texte ou bordures sont idéales car elles peuvent facilement être recadrées, ce qui sera souvent nécessaire.
  • Les motifs répétitifs vous offrent une grande flexibilité dans le style d'affichage.
  • Les images d'arrière-plan ne seront pas transférées si vous changez de template.

Forme de l'image

Les images d'arrière-plan à fond perdu sont recadrées différemment si vous êtes sur mobile ou ordinateur de bureau : l'orientation est généralement en mode portrait sur les mobiles.

Lorsque vous choisissez une image d'arrière-plan, pensez à la manière dont les visiteurs peuvent accéder à votre site :

  • Si vous pensez que la plupart de vos visiteurs seront sur mobile, vous pouvez éviter le problème de recadrage en choisissant une image d'arrière-plan plus haute que large.
  • Si vous estimez que la plupart de vos visiteurs accéderont à votre site via un ordinateur de bureau,  sélectionnez une image qui soit au format paysage ou presque carrée.
  • Si votre site est susceptible d'être visité via ces deux appareils, choisissez une image d'arrière-plan qui peut s'ajuster selon diverses configurations.

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 et ajoutez votre image.
  3. Personnalisez l’image et cliquez ensuite sur Enregistrer pour publier vos modifications.

Dans Adirondack, l’ajustement ressemble à ceci :

background-image-tweak.png

Ajouter des images

Pour utiliser l’une de vos images, faites glisser l’image dans le chargeur d’image. Vous pouvez également :

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.
  • Contain - Scales the image so its longest edge (width or height) fits inside the browser.

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)

Make sure Size is set to Auto or Contain.

    • 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 modèle, 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

Quelques conseils à retenir :

  • Il est conseillé de définir des couleurs d’arrière-plan partiellement opaques pour 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 ou de bannière.

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

The same background image displays on desktop and mobile. To see the effect, it's a good idea to keep your phone close by, and refresh your site on the phone after saving changes on a desktop computer. For a quick preview as you’re editing on a desktop, use Device View.

Conseils :

  • 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 conseils de dépannage pour découvrir les ajustements les plus adaptés aux appareils mobiles.

Résolution de problèmes

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

This occurs when the background image is stretching to cover the length of the browser window. This is especially true for Blog Pages or Events Pages set to List view, since they are typically longer than other pages, and for mobile, where page content stacks vertically. The taller the page content, the more stretched the background will be to fully cover it, and the more zoomed in it will appear.

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 :

  • Cochez Fix position (Position fixe) (Remarque : 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

This occurs when an image is stretching beyond its original dimensions to fill the background area.

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 visible l’image d’arrière-plan. (Cette action affectera également l’affichage dans la version 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 pas. Dans la famille Aviator, l’ajustement Image d’arrière-plan mobile doit être coché.
  • 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 du Canvas Background (Zone de contenu) est définie sur partiellement opaque

Exemple d'image d'arrière-plan sur le modèle 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 modèle 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 modèle Native.

Voici le modèle 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 modèle 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.

  • Pages de Couverture - Les Pages de Couverture sont disponibles pour tous les templates et prennent en charge texte, boutons, accroches, logos et formes. Ce sont des pages autonomes possédant leurs propres options de style et n'affichant pas l'En-tête, la Navigation ou les Pieds de Page du site. Elles constituent l'option idéale si vous voulez faire ressortir une Page en particulier.
  • Bannières – Certains modèles 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.
  • Section Index : Page – Dans les familles de modèles 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 : 39 sur 273
Ajouter des images d’arrière-plan à l’ensemble du site