在此頁面上：瞭解如何在電子郵件設計工具中設定電子郵件正文、檢視區、結構和欄位層級的背景色彩和影像。
背景可協助您強化品牌識別，並吸引讀者注意電子郵件中的關鍵領域。 在電子郵件Designer中，您可以在內容的不同層級設定背景顏色或影像 — 從整體內文到個別結構和欄 — 讓您精確控制背景在電子郵件中的呈現方式。
在電子郵件Designer中設定背景時，請記住以下最佳實務：
- 只有在您的設計需要時，才將背景顏色套用至內文。
- 儘可能在欄層級設定背景顏色。
- 避免在影像或文字元件上使用背景顏色，因為這些顏色較難管理。
- 在傳送之前，跨實際電子郵件使用者端測試背景影像，因為轉譯可能會與電子郵件Designer預覽不同。
下列設定可讓您在電子郵件內容的任何層級套用背景顏色或影像，從內文向下套用至個別結構和欄。
設定背景顏色 background-color
-
內文背景色彩 — 設定整個電子郵件的背景色彩。 請確定您在可從左側浮動視窗存取的 導覽樹狀結構 中選取內文，並使用右側的 樣式 索引標籤中的專用選項。
-
檢視區背景色彩 — 設定檢視區色彩，以在所有結構元件上套用相同的背景色彩，不受主體背景色彩影響。
-
結構背景顏色 — 若要將背景顏色套用至單一結構元件，請直接在畫布中或從左側色盤中選取它，然後為該結構設定特定顏色。
note tip TIP 在此情況下，請確定您未設定檢視區背景顏色，因為它可能會隱藏結構背景顏色。 -
資料行背景色彩 — 設定資料行層級的背景色彩。 同樣地，請確定您從左側浮動視窗中選取想要的欄，並設定該欄的特定顏色。
note tip TIP 這是最常見的使用案例和最佳實務，因為它可讓您在編輯其餘電子郵件內容時擁有更多彈性。
設定背景影像 background-image
您也可以為結構或資料行元件的內容設定背景影像。 這最常用於結構層級；在欄層級設定一個是可能的，但很少使用。
設定背景影像後，請使用 影像位置 下拉式清單來控制影像如何填滿結構或欄。 以下選項可供選取：
縮放以填滿，置中：
- 符合 — 延展影像以在兩個軸上填滿容器，而不保留其外觀比例。
- 完整寬度 — 依照容器的寬度比例縮放影像，並將其垂直置中。
- 全高 — 依照容器的高度比例縮放影像，並將其水準置中。
縮放以填滿，錨定到邊緣：
- 完整寬度 — 頂端 — 與 完整寬度 相同，錨定在容器頂端。 溢位會在底部裁切。
- 全寬 — 底部 — 與 全寬 相同，錨定在容器底部。 頂端會裁切溢位。
- 全高 — 左側 — 與 全高 相同，錨定在容器的左側。 溢位會在右側裁切。
- 全高 — 右 — 與 全高 相同，錨定在容器的右側。 左邊會裁切溢位。
圖磚：
- 重複 — 將影像以原始大小並排填滿容器。
位置（不縮放）：
- 左、右、中、上、下 — 將影像定位為其原始大小，錨定至容器的對應邊緣或中心。
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.