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

Toutes les images d’arrière-plan peuvent être configurées en pleine page pour occuper la page jusqu’aux bords du navigateur.

Astuce : si votre template ne prend pas en charge les arrière-plans de site, apprenez à créer des arrière-plans de page.
La version 7.1 ne prend pas en charge les images d’arrière-plan applicables à l’ensemble du site.

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 :

  • Pour les images d’arrière-plan en pleine page, nous vous recommandons de charger des images avec une largeur comprise entre 1 500 et 2 500 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 l'outil de chargement d'images. 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.
  • 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 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

À 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

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 :

  • 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

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 :

  • 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

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 visible l’image d’arrière-plan. (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 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 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 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 : 43 sur 317
Ajouter des images d’arrière-plan à l’ensemble du site