Remarque : même si nos guides les plus populaires ont été traduits en français, 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.

Étape 1 - Accéder à l'Éditeur de Style

Dans le Menu Principal, cliquez sur Design, puis sur Style Editor (Éditeur de Style). Pour en savoir plus sur l'utilisation de l'Éditeur de Style, rendez-vous sur Réalisation de changements de style.

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

Le nom de l'outil d'ajustement varie selon les templates. Cherchez dans l'Éditeur de Style un outil appelé Background Image (Image d'arrière-plan), Site Background Image (Image d'arrière-plan de site) ou Page Background Image (Image d'arrière-plan de page).

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.

Autrement, vous pouvez cliquer sur Getty Images pour utiliser une image de stock pour 10 $. C'est une formidable option dans le cas où vous ne possédez pas votre propre image. Pour en savoir plus, visitez la page Aperçu de Getty Images et Squarespace.

É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

La part de votre image d'arrière-plan qui va s'afficher dépend de la façon dont vous concevez les autres éléments de votre site. Les options de style et les noms des outils d'ajustement varient en fonction des templates mais vous pouvez utiliser l'Éditeur de Style pour tester des fonctions avec certaines ou toutes les zones de votre site ci-dessous :

  • 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.
  • Consultez nos conseils pratiques sur les ajustements de l'Éditeur de Style adaptés aux mobiles.

Résolution de problèmes

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

Cela se produit lorsque l'image d'arrière-plan est étirée pour recouvrir toute la longueur de la fenêtre du navigateur. Ceci risque en particulier de se produire pour les Pages Blog ou les Pages Événement définies en Vue Liste car elles sont habituellement plus longues que les autres pages. Sur les appareils mobiles, cela risque de se produire sur des pages dans lesquelles les éléments sont alignés verticalement. Plus le contenu de la page est grand, plus l'arrière-plan sera étiré pour pouvoir la recouvrir 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

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'option d'ajustement de l'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 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. Ce sont des pages autonomes possédant leurs propres options de style et n'affichant pas l'en-tête, la navigation ou le pied de page du site. Elles constituent l'option idéale si vous voulez faire ressortir une page en particulier.
  • Filtre de bannière - Sur certains templates, vous pouvez ajouter des images de bannière. Une fois le texte ou le contenu ajouté, la bannière devient votre image d'arrière-plan pour la page.

Pages de Couverture

Vous pouvez créer des pages à arrière-plans spécifiques sur n'importe quel template à l'aide des Pages de Couverture. Les Pages de Couverture prennent en charge texte, boutons, accroches, logos et formes.

  1. Rendez-vous dans la section Pages (Pages).
  2. Cliquez sur l'icône +, puis Cover Page (Page de Couverture).
  3. Choisissez une mise en page qui possède une image d'arrière-plan, telle que Cover (Couverture) ou Card (Carte).
  4. Utilisez la section Branding & Text (Branding et texte) pour ajouter du contenu, et la section Media (Média) pour ajouter une image d'arrière-plan.

De nombreux templates prennent en charge les bannières, qui s'affichent sous forme d'image située en haut de la page. Si vous ajoutez du texte à la bannière et que vous laissez vide le reste de la page, la bannière devient l'image d'arrière-plan.

La plupart des bannières prennent en charge du texte simple. Dans la famille Brine, vous pouvez utiliser des blocs pour ajouter de nombreux types de contenu par dessus votre bannière. C'est pour cette raison que, si vous choisissez un template en souhaitant y ajouter des images d'arrière-plans, nous vous conseillons d'utiliser un template de la Brine famille et de suivre ces étapes :

  1. Ajoutez une Page Normale vide et cliquez sur Save (Enregistrer).
  2. Ajoutez une image de bannière.
  3. Ajoutez du contenu à la Zone d'introduction à l'aide de blocs.
  4. Cliquez sur Save (Enregistrer), puis actualisez la page.
  5. Dans l'Éditeur de Style, utilisez les ajustements Overlay (Filtre) pour modifier le style du contenu qui s'affiche par dessus les bannières. Lisez le guide des templates pour en savoir plus.

Vous pouvez aussi créer cet effet dans un Index empilé en ajoutant un seul champ de contenu. Si votre template prend en charge un Index empilé :

  1. Créez une Page Index.
  2. Ajoutez un champ Content (Contenu) à l'Index.
  3. Attribuez une image de bannière à ce champ.
  4. Consultez cette liste pour savoir comment ajouter du contenu par dessus l'image de bannière.
Astuce : si vous utilisez un template retiré qui possède des arrière-plans de page intégrés, ajoutez l'image en tant que vignette au sein des Paramètres de Page.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 26 sur 178