Remarque : même si nos guides les plus populaires ont été traduits en espagnol, certains guides sont uniquement disponibles en anglais.
Ajouter une image d'arrière-plan

Les images d'arrière-plan s'affichent derrière le contenu de votre site et ajoutent un élément visuel qui donne un caractère particulier à votre site.

Vous pouvez ajouter des images d'arrière-plan à la plupart des templates Squarespace. Le style des images d'arrière-plan varie selon les templates mais la majorité de ces images s'applique à tout le site ; c'est-à-dire qu'elles s'affichent sur chaque page du site. Toutes les images d'arrière-plan peuvent être définies en pleine page. Elles remplissent alors toute la page jusqu'aux bords du navigateur. 

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 à fond perdu, nous vous recommandons d'utiliser des images d'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.

Templates compatibles

Les templates qui suivent prennent en charge les images d'arrière-plan applicables sur tout le site. Cette liste regroupe les templates par famille.

  • Adirondack
  • Avenue
  • Famille Aviator (Aubrey, Aviator) - De plus, les Pages Info prennent en charge une image d'arrière-plan dédiée à la page.
  • Five
  • Forte
  • Momentum
  • Famille Montauk (Julia, Kent, Montauk, Om)
  • Native
Astuce : si votre template ne prend pas en charge les arrière-plans de site, apprenez à créer des arrière-plans de page.

Step 1 - Go to Site Styles

In the Home Menu, click Design, then click Site Styles. For more help using Site Styles, visit Making style changes.

Remarque : pour ajouter une image d'arrière-plan spécifique à une page au template Aviator ou Aubrey, rendez-vous d'abord dans la section Pages, puis ouvrez la Page Info. Ouvrez n'importe quel autre type de page afin d'ajouter l'arrière-plan applicable à tout le site.

Étape 2 - Ajouter une image

The tweak name varies by template, but look for a tweak in Site Styles named Background Image, Site Background Image, or Page Background Image. Click the tweak to open it. 

Pour utiliser l'une de vos propres images, faites glisser le fichier dans l'outil de téléchargement d'images. Vous pouvez également cliquer sur l'outil de téléchargement d'images pour ouvrir un menu de sélection de fichier et choisir un fichier sur votre ordinateur.

Alternatively, click Search For Image to add a free or premium stock image. This is a great option if you don't already have an image to use. To learn more, visit Searching and adding stock images.

add_background_image.jpg

Étape 3 - Retravailler et redimensionner 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.

Position

Définissez la position de l'image de bannière :

  • 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
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 (Contenir) - Adapte l'échelle de l'image afin que son côté le plus long (largeur ou hauteur) rentre à l'intérieur du 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.

Repeat (Répétition)

Assurez-vous que la Taille est définie sur Automatique ou 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.

Étape 4 - Ajuster d'autres zones du site

How much of your background image displays depends on how you set up your other site elements. The style options and tweak names vary from template to template, but use your Site Styles to experiment with some or all of the following areas of your 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
Astuce : nous vous conseillons de choisir des couleurs d'arrière-plan partiellement opaques afin que l'image d'arrière-plan puisse apparaître par-dessus.
Remarque : une couleur d'arrière-plan ou de filtre est susceptible de s'afficher lors du chargement d'un arrière-plan ou d'une image de bannière.

Étape 5 - Enregistrer

Cliquez sur Save (Enregistrer) pour publier vos modifications.

Étape 6 - Vérifier l'apparence du site sur mobile (facultatif)

La même image d'arrière-plan s'affiche sur ordinateur de bureau et mobile. Lorsque vous modifiez votre site à partir de votre ordinateur de bureau,  gardez votre téléphone portable à portée de main et actualisez la page pour voir ces changements sur la version mobile. Pour avoir un aperçu rapide du site en même temps que vous le modifiez, utilisez Device View(Vue Mobile). 

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.
  • See our troubleshooting tips for Site Styles tweaks that work well on mobile.

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

Cela se produit lorsqu'une image est étirée au-delà de ses dimensions originelles afin de remplir 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 afin de faire apparaître l'image d'arrière-plan. (Cela aura également un effet sur la vue desktop.) Assurez-vous que l'image originale fait moins de 2 500 pixels sur son plus long côté, car, au-delà, les images ne s'afficheront pas. Dans les templates Aviator et Aubrey, assurez-vous que l'ajustement Image d'arrière-plan mobile est 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

Voici un exemple pour le template Forte :

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

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)

Voici un exemple avec le template Aviator, montrant un arrière-plan applicable à tout le site et un arrière-plan spécifique aux Pages Info :

  • Les templates Aviator et Aubrey possèdent cette fonctionnalité.

aviator-backgrounds.gif

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 templates prennent en charge les images de bannière qui s'affichent en haut de la page et peuvent prendre en charge du contenu superposé. Par exemple, dans la famille Brine, vous pouvez utiliser des Blocs dans une zone d'introduction pour ajouter de nombreux types de Contenu par dessus votre bannière.
  • Champ de Page Index - Dans les catégories de templates Brine et Pacific, vous pouvez utiliser un Index pour ajouter une Image d’arrière-plan derrière un Champ de Page Normale.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 31 sur 221