Sur cette page : découvrez comment définir les couleurs et les images d’arrière-plan au niveau du corps, de la fenêtre d’affichage, de la structure et des colonnes de votre e-mail dans le Concepteur d’e-mail.
Les arrière-plans vous permettent de renforcer votre identité de marque et d’attirer l’attention sur les principaux points de votre e-mail. Dans le Concepteur d’e-mail, vous pouvez définir une couleur ou une image d’arrière-plan à différents niveaux de votre contenu (du corps global aux structures et colonnes individuelles), ce qui vous permet de contrôler précisément le rendu des arrière-plans dans l’ensemble de votre e-mail.
Gardez à l’esprit les bonnes pratiques suivantes lors de la définition des arrière-plans dans le Concepteur d’e-mail :
- Appliquez une couleur d’arrière-plan uniquement si votre conception l’exige.
- Dans la mesure du possible, préférez la définition des couleurs d’arrière-plan au niveau de la colonne.
- Évitez d’utiliser des couleurs d’arrière-plan sur des composants d’image ou de texte, car elles sont plus difficiles à gérer.
- Testez les images d’arrière-plan sur les clients de messagerie réels avant l’envoi, car le rendu peut différer de l’aperçu du Concepteur d’e-mail.
Les paramètres suivants vous permettent d’appliquer une couleur ou une image d’arrière-plan à n’importe quel niveau du contenu de votre e-mail, du corps aux structures et colonnes individuelles.
Définir une couleur d’arrière-plan background-color
-
Couleur d’arrière-plan du corps : définissez une couleur d’arrière-plan pour l’ensemble de l’e-mail. Assurez-vous de sélectionner les paramètres du corps dans l’arborescence de navigation accessible à partir de la palette de gauche et d’utiliser l’option dédiée dans l’onglet Styles sur la droite.
-
Couleur d’arrière-plan de la fenêtre : définissez la même couleur d’arrière-plan pour tous les composants de structure en sélectionnant Couleur d’arrière-plan de la fenêtre.
-
Couleur d’arrière-plan de la structure : pour appliquer une couleur d’arrière-plan à un seul composant de structure, sélectionnez-la directement dans la zone de travail ou à partir de la palette de gauche, puis définissez une couleur spécifique pour cette structure.
note tip TIP Dans ce cas, veillez à ne pas définir de couleur d’arrière-plan de fenêtre, car celle-ci pourrait cacher les couleurs d’arrière-plan de la structure. -
Couleur d’arrière-plan de la colonne : définissez une couleur d’arrière-plan au niveau de la colonne. Veillez à nouveau à sélectionner la colonne souhaitée dans la palette de gauche, puis à définir une couleur spécifique pour cette colonne.
note tip TIP Il s’agit du cas d’usage le plus courant et d’une bonne pratique, car il vous donne plus de flexibilité lors de la modification du reste du contenu de votre e-mail.
Définir une image d’arrière-plan background-image
Vous pouvez également définir une image d’arrière-plan pour le contenu d’un composant de colonne ou de structure. Cette option est généralement utilisée au niveau de la structure ; la définition d’une option au niveau de la colonne est possible, mais elle est rarement utilisée.
Une fois qu’une image d’arrière-plan est définie, utilisez le menu déroulant Emplacement de l’image pour contrôler comment l’image remplit la structure ou la colonne. Les options ci-dessous peuvent être sélectionnées :
Redimensionner pour remplir, centré :
- Ajuster : étire l’image pour remplir le conteneur sur les deux axes, sans conserver ses proportions.
- Pleine largeur : met l’image à l’échelle proportionnellement à la largeur du conteneur et la centre verticalement.
- Pleine hauteur : met l’image à l’échelle proportionnellement à la hauteur du conteneur et la centre horizontalement.
Redimensionner pour remplir, ancrage sur une arête :
- Pleine largeur - Haut : identique à Pleine largeur, ancré en haut du conteneur. Le débordement est recadré en bas.
- Pleine largeur - Bas : identique à Pleine largeur, ancré au bas du conteneur. Le débordement est recadré en haut.
- Pleine hauteur - Gauche : identique à Pleine hauteur, ancré à gauche du conteneur. Le débordement est recadré sur la droite.
- Pleine hauteur - Droite : identique à Pleine hauteur, ancré à droite du conteneur. Le débordement est recadré sur la gauche.
Mosaïque :
- Répéter : affiche l’image en mosaïque à sa taille d’origine pour remplir le conteneur.
Position sans mise à l’échelle :
- Gauche, Droite, Centre, Haut, Bas : positionne l’image à sa taille d’origine, ancrée sur le bord ou le centre correspondant du conteneur.
This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.
For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.
- TL;DR: This page explains how to set background colors and images at the body, viewport, structure, and column levels of an email in the Email Designer, and Adobe’s best practices for doing so.
Intents:
- Set a Background color for the whole email at the body level
- Apply the same background color to all structure components using Viewport background color
- Set a different background color for a specific structure component
- Set a background color for a specific column
- Set a Background image for a structure or column component and choose an Image placement option
Glossary:
- Background color: A color applied to the whole email when Body is selected in the navigation tree (product-specific)
- Viewport background color: A setting that applies the same background color to all structure components, independently of the body’s background color (product-specific)
- Background image: An image set for the content of a structure or column component; falls back to the background color when not supported (product-specific)
- Image placement: A dropdown that controls how a background image fills its container — by scaling it centered, scaling it anchored to an edge, tiling it, or positioning it without scaling (product-specific)
Guardrails:
- Some email programs / clients do not support background images; when not supported, the background color is used instead, so select an appropriate fallback background color.
- When setting a different background color per structure component, do not set a viewport background color, as it may hide the structure background colors.
- Column-level background color is the most common use case and Adobe’s recommended best practice, for more flexibility when editing the rest of the email content.
- Avoid using background colors on image or text components, as they are harder to manage.
- Apply a background color to the body only if the design requires it.
- A background image can also be set at the column level, though this is rarely used; the same fallback color and Image placement options apply there too.
Terminology:
- Canonical name: Background — Acronym: n/a — variants: background color, background image, image placement
- Do not confuse: “Background color” (body-level, whole email) ≠ “Viewport background color” (same color applied to all structure components)
- Do not confuse: “Background color” (supported broadly by email clients) ≠ “Background image” (not supported by all email clients, falls back to background color)
- Do not confuse the “Scale to fill, centered” Image placement options (Fit, Full Width, Full Height) with the “Scale to fill, anchored to an edge” options (Full Width - Top, Full Width - Bottom, Full Height - Left, Full Height - Right), which control which side is cropped instead of centering the image
FAQ:
- Q: Where does Adobe recommend setting background colors? — At the column level, which is the most common use case and best practice, allowing more flexibility when editing the rest of the email content.
- Q: What happens if a background image is not supported by an email client? — The background color is used instead, so select an appropriate fallback background color.
- Q: How do I apply the same background color to all structure components? — Select Viewport background color, which can be set independently of the body’s background color.
- Q: Why might my per-structure background colors not appear? — A viewport background color may hide the structure background colors; do not set one in that case.
- Q: Can I set a background image at the column level? — Yes, though it is rarely used; the same fallback color behavior and Image placement options described for structures apply there too.
- Q: What is the difference between “Full Width” and “Full Width - Top” / “Full Width - Bottom”? — “Full Width” scales the image proportionally to the container’s width and centers it vertically. The “Top” and “Bottom” variants anchor it to that edge instead, cropping the opposite side rather than centering.
- Q: What is the difference between “Full Height” and “Full Height - Left” / “Full Height - Right”? — “Full Height” scales the image proportionally to the container’s height and centers it horizontally. The “Left” and “Right” variants anchor it to that side instead, cropping the opposite side rather than centering.