March 2022 | Full Body Background and Row Background Image Improvements
We have released a new Background image configuration property. This property allows users to set a background image for an entire design document. These images can be sourced from an external link or imported via File Manager.
This new feature enhances the user design experience by allowing more control in layering content over images. This property also provides options for aligning the background image to fit the entire background, center, and/or repeat, allowing users complete control over the positioning of background images.
We have also redesigned the Row Background image property to be more functional with this release. Specifically, we've replaced the "Full Width" check box with a "Fit to Background" toggle to provide enhanced image control. We've also added buttons to apply the image to either the row or the content blocks it contains.
Description of Changes
Full Document Background Image
The Background image property shown below is now available when a user clicks the Sidebar menu of the Settings tab.
As noted in the UI, background image support varies across email clients. Images may be linked from an external file location or imported via File Manager. A fallback content area background color should be chosen for optimal results.
The image below shows the placement of the new property within the UI.
If a user toggles on "Background image" and sets an image via external URL or File Manager import, the image will apply to the entire design background.
The selected image will display at its native resolution by default, not scaling to fit the display. We've added the following options to provide more control over image placement.
- Fit to background . When toggled on, this option scales the image to fit the background dimensions of the entire document. This feature is best used with high-resolution images.
- Repeat. When checked, this option will repeat the image across the entire background. This works best with small images that are designed to "tile".
- Center. When checked, this option will place the image in the center. This option may be used along with Repeat to tile the image around the center.
Reason for Change
The use of background images in design work has several recognized benefits, including:
- Layering of content on top of images. This is useful for CTA buttons, text content, and other elements best separated from the image.
- Enhanced readability when images are not rendered. Since the content is separate from the image, it will not be lost if an email client or web browser cannot render an image. This also helps improve general accessibility.
Row Background Images Property Changes
The following changes will be applied to the Background image property in the Rows tab of the Sidebar.
The option "Apply image to" Content area or Row will be added.
- "Full Width" will be replaced by a "Fit to background" toggle.
Reason for Change
Our development of this feature is intended to streamline the user experience. We believe that this change will:
- Clarify how Row image backgrounds can be formatted.
- Add more control over where image backgrounds appear within a design.
The new row background image property will be available in the UI automatically. No additional configuration is needed. No action is required to update templates with existing image backgrounds. This update is fully backward compatible.
To enable the Full Background image feature, log in to the Developer Portal and go to Dashboard > Application details > Application configuration. Scroll down to Settings and toggle on Enable Background image (entire document) as shown below.