Background images can instantly elevate your design - adding depth, texture, or subtle branding elements behind your content. You can apply them across your entire design using Global Styles or within individual Rows for more localized effects.
Important: Older versions of Outlook do not display background images. Always set a fallback background color to maintain contrast and readability (see Step 9 below).
Quick Reference (Advanced Users) - Click to Expand
- Apply globally: Go to Global Styles → toggle Background Image on.
- Apply to a Row: Select a Row → toggle Background Image under Row Properties.
- Fit to background: Makes the image fill the full design or row.
- Repeat: Tiles the image horizontally and vertically.
- Center: Positions the image centrally.
- Fallback color: Always add one for compatibility with older email clients.
Try it like this:
Add a soft gradient or watermark logo as a global background image.
Then apply a white Content area background color to keep
your
text crisp while letting the image show subtly behind it.
Add a Background Image
- Open your design in the Email Composer or Landing Page Composer. For example: Content → Email Templates or Landing Pages → select a design → Edit → Design tab.
- To add a background to the entire design, click the Global Styles tab.
To add one to a specific Row, select the Row by clicking just to the left or right of its content area (see Row Selection). - In the sidebar, toggle (Row) Background image on.
- Click Choose image to select from your Act-On image library, or paste an external image URL into the URL field.
- When working with a Row, choose Apply image to: either Row (covers the full Row width) or Content area (inside the padding area).
- Toggle Fit to background to stretch the image so it covers the entire background space proportionally.
- Select Repeat to tile the image horizontally and vertically ideal for symmetrical patterns or textures.
- Choose Center to align the background image in the middle of the Row or design.
Tip: If Repeat and Center are both active, the image will first center and then repeat to the left and right. If you use Repeat without Center, the image begins at the top-left corner.
- To ensure readability across all devices, set a fallback background color for cases where the background image cannot render. Choose either (Row) Background color or Content area background color in the sidebar.
Examples
Global background image: A watermark applied in the Global Styles tab with a transparent content area color:
Row-level background image: A repeating, centered honeycomb pattern applied to a Row with matching background colors:
Best Practices
- Always include a fallback background color for accessibility and compatibility.
- Keep text legible - use translucent overlays or content area backgrounds when needed.
- Use lightweight images (under 1 MB) to prevent slow loading or clipping in emails.
- Test your background images across Outlook, Apple Mail, and Gmail to ensure consistency.
- For subtle branding, use small repeating patterns instead of large hero images.