--- title: "Définir une image d'arrière-plan pour une vignette" description: "Comment utiliser une image comme arrière-plan d'une vignette dans le composant WebPart Vitextra Smart Tiles : l'option Background image, saisie d'une URL ou choix d'une image dans une bibliothèque du site, recadrage et mise à l'échelle de l'image, lisibilité du titre, couleur de repli, miniature YouTube et suppression de l'image." url: https://vitextra.com/fr/support/kb/10245 language: fr published: 2026-10-13 modified: 2026-10-13 products: - "Smart Tiles" author: "Vitālijs Kalniņš" tags: ["image d'arrière-plan de vignette", "vignette SharePoint avec photo", "arrière-plan Smart Tiles", "navigation par vignettes d'images", "vignettes images SharePoint Online", "arrière-plan de vignette depuis une bibliothèque de documents", "miniature YouTube vignette", "texte lisible sur image", "Vitextra Smart Tiles", "vignettes héros SharePoint"] --- # Définir une image d'arrière-plan pour une vignette Comment utiliser une image comme arrière-plan d'une vignette dans le composant WebPart Vitextra Smart Tiles : l'option Background image, saisie d'une URL ou choix d'une image dans une bibliothèque du site, recadrage et mise à l'échelle de l'image, lisibilité du titre, couleur de repli, miniature YouTube et suppression de l'image. ## Introduction Une vignette colorée avec une icône est claire et compacte ; une vignette avec une photographie est engageante. [Smart Tiles](https://vitextra.com/fr/products/smart-tiles) permet à n'importe quelle vignette d'afficher une image d'arrière-plan à la place d'une couleur unie : une photo des bureaux pour *Visit us*, une photo de produit pour une page de lancement, une photo d'équipe pour le site d'un service. Cet article explique comment définir l'image, comment elle est affichée et comment garder la vignette lisible. ## Définir l'image 1. Ouvrez la page en mode édition et cliquez sur le bouton **…** de la vignette. 2. Pointez sur **Background Color** et choisissez **Background image**, le premier élément du sous-menu. 3. Dans la boîte de dialogue **Image**, saisissez ou collez l'adresse de l'image dans le champ **Image URL**, ou parcourez les bibliothèques du site et cliquez sur l'image. 4. Cliquez sur **Apply**. ![L'élément Background image dans le menu Background Color](https://static.vitextra.com/articles/10245/background-image-menu-fr.png) *L'élément Background image dans le menu Background Color* La boîte de dialogue **Image** est la même que celle utilisée pour les images d'icônes personnalisées : le champ **Image URL** accepte une adresse commençant par `https://` ou un chemin commençant par `/`, et la liste située en dessous permet de parcourir les ::bibliothèques de documents:: du site actuel, dossier par dossier, en affichant les images sous forme de miniatures. Cette boîte de dialogue est décrite en détail dans [KB10244. Utiliser une image personnalisée comme icône de vignette](https://vitextra.com/fr/support/kb/10244). ## Affichage de l'image L'image remplit toute la vignette : elle est mise à l'échelle de manière à la couvrir entièrement et elle est centrée ; tout ce qui dépasse est rogné sur les bords. La vignette conserve ses proportions : sa largeur est définie par la **Size** (Taille) de la vignette et sa hauteur par le contenu et l'**Internal Indent** (Retrait interne). La même image est donc recadrée différemment sur une vignette Small et sur une vignette Full Width. L'icône, le titre et la description sont dessinés par-dessus l'image, dans la **Font Color** (Couleur de police) de la vignette. ![La même image sur des vignettes de tailles différentes](https://static.vitextra.com/articles/10245/image-crop-fr.png) *La même image sur des vignettes de tailles différentes* ### La couleur sous-jacente La couleur d'arrière-plan de la vignette ne disparaît pas lorsqu'une image est définie : elle est peinte sous l'image et reste visible pendant le chargement de l'image, à travers les zones transparentes d'un PNG, et si l'image ne peut pas du tout être chargée. Choisissez une couleur proche de la tonalité générale de l'image, afin qu'une vignette en cours de chargement ne s'affiche pas brièvement dans une couleur différente. 📝 **Remarque** Le choix d'une couleur dans le menu **Background Color** supprime l'image d'arrière-plan : l'arrière-plan d'une vignette est soit une image, soit une couleur, jamais les deux. La couleur qui était peinte sous l'image redevient l'arrière-plan visible. ## Garder le texte lisible Un texte placé sur une photographie n'est lisible que dans la mesure où le contraste avec celle-ci le permet. Quelques habitudes aident : - choisissez des images avec une **zone calme** (ciel, mur, eau) à l'endroit où se trouvera le titre, ou recadrez l'image de façon à placer une telle zone au centre ; - utilisez du **texte blanc** sur les images sombres et du **texte noir** sur les images claires, et définissez la **Font Color** en conséquence ; - activez **Shadow** (Ombre) dans les paramètres du composant WebPart : l'ombre portée sous l'icône la détache d'un arrière-plan chargé ; - envisagez de masquer le **titre** pour les vignettes d'image qui parlent d'elles-mêmes, et de placer le nom dans la **Description** à la place, afin qu'il apparaisse tout de même dans l'info-bulle. ![La couleur de police et le choix de l'image déterminent la lisibilité](https://static.vitextra.com/articles/10245/readability-fr.png) *La couleur de police et le choix de l'image déterminent la lisibilité* ## La miniature YouTube Lorsque le lien d'une vignette pointe vers une vidéo YouTube, le menu **Background Color** gagne un élément supplémentaire au-dessus de **Background image** : **Thumbnail** (Miniature). Il utilise l'image d'aperçu de la vidéo comme arrière-plan, sans enregistrer d'adresse d'image dans la vignette. Sur la page publiée, une vignette à miniature n'affiche que le bouton de lecture ; son titre et sa description restent dans l'info-bulle. ## Exigences relatives aux images - L'adresse doit utiliser `https://` ou être un chemin sur le locataire (tenant) actuel ; les visiteurs doivent disposer d'un accès en lecture à l'image. - Gardez un fichier de taille raisonnable : une photographie de 1200 pixels sur son plus grand côté, enregistrée au format JPEG ou WebP, suffit pour une vignette Full Width et se charge rapidement sur chaque page où le volet est utilisé. - Les images à arrière-plan transparent laissent apparaître la couleur de la vignette à travers les zones transparentes, ce qui peut servir à créer des designs de type filigrane. ❗ **Important** Les images sont chargées par le navigateur du visiteur à partir de l'adresse indiquée dans la vignette. Stockez les images dans une bibliothèque que tous les visiteurs de la page peuvent lire ; **Site Assets** du même site est le choix habituel. Un visiteur sans accès ne voit que la couleur d'arrière-plan. ## Supprimer l'image Choisissez une couleur dans le menu **Background Color**, ou rouvrez **Background image** et cliquez sur **Remove image** dans la boîte de dialogue. La vignette retrouve sa couleur d'arrière-plan. 💡 **Astuce** Les couleurs disponibles pour les vignettes et leur police sont décrites dans [KB10043. Couleurs des vignettes dans Smart Tiles](https://vitextra.com/fr/support/kb/10043).