Images d’arrière-plan des sections

Ajoutez et personnalisez des images d’arrière-plan pour les sections Page de votre site.

Dernière mise à jour le 3 janvier 2025

Il existe plusieurs manières de personnaliser le style de l’arrière-plan de votre site. L’une des options consiste à ajouter des images d’arrière-plan aux sections de page et à personnaliser ces images avec divers effets d’image. Il s’agit d’un excellent moyen de créer des bannières de page et des éléments visuels saisissants qui correspondent à votre marque.

Ce guide explique comment ajouter et personnaliser des photos et d’autres images d’arrière-plan que vous importez sur Squarespace. Découvrez toutes vos options de style d’arrière-plan dans l’article Personnaliser l’arrière-plan de votre site.

Accéder à cette fonctionnalité

Ce guide concerne la version 7.1. Si votre site utilise la version 7.0, vous pouvez ajouter des images de bannière et des vidéos d’arrière-plan pour des effets similaires, en fonction de votre template.

Regarder une vidéo explicative

Avant de commencer

  • Les dispositions automatiques, les sections du portfolio et toutes les sections de blocs permettent d’ajouter des images d’arrière-plan. Vous pouvez également ajouter des vidéos d’arrière-plan et des motifs d’arrière-plan à ces sections.
  • Il n’est pas possible d’ajouter des images d’arrière-plan aux sections Galerie, mais vous pouvez ajouter une couleur d’arrière-plan ou utiliser la Disposition en diaporama : complet pour obtenir un effet similaire.
  • Les sections Blog, Cours, Événements, Boutique et Vidéos ne prennent pas en charge les contenus d’arrière‑plan, mais vous pouvez ajouter une couleur d’arrière‑plan.
  • Si votre section contient du texte ou un autre contenu, veillez à ce qu’il soit toujours visible et lisible devant votre arrière-plan. Pour modifier la couleur du texte, utilisez les ajustements de police du thème de couleurs de cette section.
  • Les images d’arrière-plan sont recadrées automatiquement en fonction de la quantité de contenu de la section et de la taille de l’écran du navigateur du visiteur. Pour choisir le mode de recadrage d’une image, utilisez un bloc Image. Pour découvrir comment les images d’arrière-plan s’affichent sur les appareils mobiles, consultez l’article Comment mon site s’affichera-t-il sur les appareils mobiles ?

Astuces relatives au formatage des images

Vérifiez le format de vos images avant de les charger sur votre site. Pour les images d’arrière-plan, suivez ces consignes :

  • Utilisez des images dont la largeur est comprise entre 1 500 pixels et 2 500 pixels.
  • Évitez les fichiers image avec texte intégré. Il est préférable d’ajouter du texte sur l’image.
  • Si vous souhaitez ajouter du texte sur l’image, utilisez une image avec un motif abstrait.
  • Pour connaître les types de fichier image et les exigences complètes en matières dʼimage, consultez lʼarticle Formater vos images pour une utilisation web.

Ajouter des images d’arrière-plan

Utilisez une image d’arrière-plan pour ajouter du contraste au texte ou à tout autre contenu qui recouvre la section, ou créez une bannière lorsque la section se trouve en haut de la page.

Pour ajouter une image à l’arrière‑plan à une section :

  1. Ouvrez le panneau Pages, puis cliquez sur la page contenant la section que vous souhaitez modifier.
  2. En haut à gauche, cliquez sur Modifier.
  3. Survolez la section et cliquez sur l’icône crayon, puis cliquez sur Arrière-plan.
  4. Cliquez sur Image, puis sur +. Choisissez une source d’image dans le menu déroulant pour charger une image, réutiliser une image chargée précédemment, utiliser une image d’archive ou utiliser un arrière-plan avec image d’archive.
  5. (Facultatif) Cliquez sur Effet d’image pour sélectionner un effet d’image.
  6. (Facultatif) Personnalisez l’image en utilisant les options Largeur de l’arrière-plan et Opacité de superposition.
  7. (Facultatif) Cliquez sur Mise en forme pour modifier la hauteur de section ainsi que la largeur et l’alignement du contenu.
  8. (Facultatif) Cliquez sur Couleurs afin de sélectionner un thème de couleurs pour la superposition et pour tout contenu ajouté. Pour en savoir plus, consultez l’article Modifier les couleurs. Si vous supprimez l’image, la superposition devient la couleur d’arrière-plan de la section.
  9. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Après avoir ajouté une image, vous pouvez :

Ajouter du texte ou un autre contenu

Vous pouvez ajouter du texte ou d’autres contenus sur une image d’arrière-plan. Comme le texte que vous ajoutez s’adapte à toutes les tailles d’écran et à tous les appareils mobiles, il s’agit d’un excellent moyen d’ajouter du texte si vous utilisez l’image d’arrière-plan comme bannière.

Astuce

si vous souhaitez afficher uniquement du texte en haut de votre site, préférez une barre d’annonce aux bannières.

Nous déconseillons l’utilisation d’une image d’arrière-plan comportant un texte dans le fichier d’image pour deux raisons :

  • Les ordinateurs ne sont pas en mesure de lire ce texte, si bien que les moteurs de recherche ne le référenceront pas dans leurs résultats.
  • Lorsque votre image change de forme pour s’adapter aux différentes largeurs de navigateur, certaines parties du texte sont rognées.

Pour ajouter du texte ou un autre contenu :

  1. Cliquez sur Modifier sur la page contenant l’image d’arrière-plan.
  2. Cliquez sur Ajouter un bloc ou sur un point d’insertion pour ajouter un bloc Texte. Cliquez dans le bloc pour ajouter du texte, puis utilisez le menu déroulant Mise en forme pour choisir un style de paragraphe.
  3. Ajoutez d’autres blocs Texte ou d’autres contenus à la section (comme un bloc Bouton).
  4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Styles de texte

Les paramètres de style de votre site dans le panneau Design définissent la façon dont le texte s’affiche sur votre image d’arrière-plan.

  • Pour modifier les polices de votre site, choisissez un pack de polices et une taille de base dans le panneau Polices. Faites défiler la page jusqu'à Attribuer des styles pour personnaliser le style d'un texte spécifique. Pour en savoir plus, consultez Modifier les polices de caractères.
  • Pour modifier la couleur de la police, choisissez une palette et un thème dans le panneau Couleurs. Cliquez sur l’icône crayon correspondant au thème de votre section pour personnaliser des éléments spécifiques de ce thème. Pour en savoir plus, consultez l’article Modifier les couleurs.

Regarder une vidéo explicative

Style : images d’arrière-plan

Pour personnaliser l’image d’arrière-plan, cliquez sur Modifier sur la page. Cliquez ensuite sur l’icône crayon dans la section de bannière, puis sur Arrière-plan. Vous pouvez alors définir la largeur de l’arrière-plan et l’opacité de superposition.

Largeur de l’arrière-plan

Pour la largeur de l'arrière-plan :

  • L'option Pleine page étend l’image d’un bord à l’autre de la fenêtre de votre navigateur, couvrant toute la largeur de votre site. Ce paramètre est généralement utilisé pour les images de bannière.
  • L'option Insertion met l'image légèrement en retrait et crée un contour autour cette dernière.

Lorsque l’image est définie sur Insertion, vous pouvez définir la couleur du contour.

Opacité de superposition

L’option Opacité de superposition permet de définir l’opacité de la superposition de couleur de votre image d’arrière-plan.

Il n’existe pas de degré d’opacité idéal à utiliser. Nous vous recommandons donc d’essayer différents paramètres afin de trouver celui qui vous convient le mieux. En général, nous recommandons un pourcentage plus élevé si la section comporte beaucoup de contenu, car cela permet de distinguer le contenu de l’image d’arrière-plan.

La couleur de l’opacité est définie par l’ajustement Superposition d’arrière-plan du thème de votre section. Pour en savoir plus, consultez l’article Modifier les couleurs.

Remarque

Si vous importez un fichier .png avec un arrière-plan transparent, le navigateur affichera toujours un arrière-plan blanc derrière l'image. Pour modifier cette couleur d'arrière-plan, vous devez modifier l'image dans un logiciel de retouche d'image tiers avant de l'importer sur votre site.

Redimensionner les images d’arrière-plan

Pour modifier la hauteur d’une image d’arrière-plan :

  1. Cliquez sur Modifier sur la page, puis sur l’icône du crayon dans la section de l’image d’arrière-plan.
  2. Dans l’onglet Mise en forme, sous Hauteur de section, sélectionnez une hauteur prédéfinie ou cliquez sur ... pour définir une hauteur personnalisée. Si vous modifiez une section de l’Éditeur intuitif, vous pouvez modifier la hauteur de la grille de la section en cliquant et en faisant glisser l’icône de la flèche bleue en bas à droite.
  3. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

La hauteur de section affecte la manière dont l’image d’arrière-plan est recadrée sur ordinateur et sur appareil mobile. Nous vous recommandons de tester différentes hauteurs afin d’obtenir l’aspect recherché.

Dans les sections de l’éditeur classique, la hauteur de l’image d’arrière-plan dépend également de la quantité de contenu de la section. Pour augmenter la hauteur sans ajouter de contenu visible, ajoutez des blocs Espaceur.

Bien que les images d’arrière-plan s’étendent généralement sur la largeur du site, vous pouvez personnaliser l’image d’arrière-plan pour insérer une bordure autour de celle-ci. La largeur de la bannière semble ainsi réduite.

Ajouter des effets à l’image d’arrière‑plan

Après avoir ajouté une image d’arrière-plan, vous pouvez ajouter des effets afin de donner à l’image un aspect plus saisissant. Certains effets ajoutent une animation de sorte que l’image est constamment en mouvement, tandis que d’autres n’apparaissent que lorsque le visiteur fait défiler cette section de votre site.

Pour ajouter un effet d’image :

  1. Après avoir ajouté une image d’arrière-plan dans l’éditeur de section, cliquez sur Effet d’image dans l’onglet Arrière-plan.
  2. Choisissez un effet dans le menu. Pour personnaliser l’effet, cliquez sur l’icône des paramètres pour ouvrir le panneau de détails. Toutes les modifications que vous apportez à cet effet apparaîtront dans l’aperçu de votre site. Pour en savoir plus sur vos options, consultez la section ci-dessous.
  3. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

À retenir :

  • Les effets d’image apparaissent uniquement sur les navigateurs et les appareils qui prennent en charge WebGL, un outil qui fonctionne avec le processeur graphique de votre appareil. Pour vérifier si votre navigateur est compatible, rendez-vous sur get.webgl.org. Si le navigateur ne prend pas en charge WebGL, l’arrière-plan de la section reste statique.
  • Les effets d’image ne s’appliquent pas aux motifs d’arrière-plan ni aux vidéos d’arrière-plan, même si la vidéo utilise une image de remplacement pour appareil mobile.

Styles d’effets d’image

Vous pouvez choisir parmi les effets d’image suivants :

  • Aucun : Aucun effet, mis à part le réglage de l’opacité de la superposition
  • Liquide : Donne à l’image un effet de vague
  • Grain du film : Ajoute une superposition statique animée à l’image
  • Parallaxe : L’image se déplace lorsque les visiteurs font défiler la page
  • Cercles réfractés : Réfracte l’image à travers un motif de cercles
  • Lignes réfractées : Réfracte l’image à travers un motif de lignes droites

Vous pouvez personnaliser l’effet de votre image dans le panneau de détails. Pour ouvrir le panneau des détails, cliquez sur un effet d’image, puis sur l’icône des paramètres.

L’icône des paramètres apparaît lorsque vous cliquez sur l’un des effets d’image de l’éditeur de section.

Faites défiler les options et les paramètres jusqu’à trouver un motif qui vous plaît. Cliquez sur une catégorie pour ouvrir le menu déroulant et afficher d’autres options. Selon le type d’effet d’image, différentes catégories s’affichent.

Par exemple, vous pouvez :

  • Modifiez la taille et la forme de l’effet.
  • Modifiez la vitesse et la direction des effets à l’aide de mouvements, comme Liquide.

Les autres paramètres sont spécifiques à chaque effet d’image et comprennent des curseurs et des sélecteurs qui modifient les principaux éléments de l’effet. Pour tester une combinaison aléatoire des paramètres, cliquez sur l’icône de sélection aléatoire lorsque vous choisissez un effet ou sur Aléatoire lorsque vous êtes dans le panneau des détails de l’effet.

Nous vous recommandons de tester chaque effet pour avoir une meilleure idée de son apparence et de son fonctionnement sur votre site.

Voici un exemple d’image d’arrière-plan de section avec un effet Liquide.

Section_background_image_with_the_Liquid_effect.gif

Supprimer une image d’arrière-plan

Pour supprimer une image d’arrière-plan :

  1. Cliquez sur Modifier sur la page, puis sur l’icône en forme de crayon dans la section de bannière.
  2. Cliquez sur Arrière‑plan.
  3. Cliquez sur Supprimer.
  4. Cliquez sur Enregistrer pour enregistrer vos changements et poursuivre les modifications. Vous pouvez aussi cliquer sur Quitter puis sur Enregistrer pour fermer l’éditeur.

Utiliser un arrière-plan de section comme bannière

Une section avec une image d’arrière-plan en haut de la page peut servir de point focal visuel afin de donner le ton à votre contenu. Une telle image est communément appelée bannière.

Les images de bannière sont généralement utilisées seules, sans autre contenu dans la section, ou comportent un texte très simple, comme un titre. Vous pouvez également créer des bannières avec d’autres types d’arrière-plan, comme des vidéos ou des œuvres d’art, pour une esthétique différente.

Même si vous pouvez les utiliser différemment, les bannières fonctionnent de la même manière que n’importe quelle section avec une image d’arrière-plan. Vous pouvez donc suivre les étapes de ce guide pour :

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.