How to add a background image to an email template or section

You will learn

Learn how to layer text, images, and other email content over background images. You can add a background image to a full email, or to a single section. By using this feature, you can layer one image on top of another, or add a button or text on top of an image.

About background images

You can add a background image behind an entire email template or behind a specific section in the template. Template backgrounds are added using the template’s Styles panel, and generally span the full width and height of the email.

Section backgrounds, however, are isolated to specific areas of the email. They enable you to create dynamic, eye-catching images and calls to action. You can also include multiple calls to action over 1 image (e.g., “Shop Shoes” and “Shop Accessories”). These section-specific background images can be added through a section’s Styles tab.

Using a background image with text and other content overlaid can increase the accessibility of your email, compared to inserting a single image that contains text. If your message contains primarily image content with little text, recipients using screen readers and other accessibility devices that don’t display images rely on alt text to understand the message’s content.

Additionally, recipients who use plain-text inboxes or set their inboxes to hide images by default won’t be able to easily understand your message. When you use standard text blocks with an image behind them, it’s easier for those recipients with accessibility needs or alternative devices to understand your message.

Selecting background images

When selecting an image to use as a section or template background, choose an image that has a sufficiently high resolution to appear crisp and professional in the inbox. Make sure to not use a file that is unnecessarily large, however, as this can lead to slow loading times for your emails. In general, use images that are 1 MB or smaller as section backgrounds.

Set a section background image

Once you’ve chosen an image to use, open your template in the drag-and-drop email editor. Select an existing section, or add a new section.

1. In the section’s Styles tab, turn on Background image.
2. Click Select image.

3. In Image library, click Select beside an image. To upload a new image, open Upload image and choose your file. If prompted to compare versions, choose Original or Compressed, then click Upload.
4. Once you’ve styled the background image, add content to the section. You can add any block type (e.g., text block, button block, table block) and any number of blocks to your section.

After setting a background image, choose a background color as well. This color will appear if the background image isn’t able to load for any reason.

1. Open the section’s Styles tab.
2. For an image displayed on Content, set Content color to Custom. For an image displayed on Section, turn on Section color.
3. Choose a color that closely matches the image and keeps your text readable if the image does not load.

To show a full-width section background image behind the content, set Content color to None. Otherwise, the content background color can cover the image.

Section background style options

Under Background image, choose Content to keep the image within the email’s content area, or Section to extend it across the full width.

In the Format section, choose between the following options:

• Original size
  Your image keeps its original dimensions. Parts that extend beyond the section area will not be visible.
• Fit
  Your image will fit entirely within the section area, and may expose the background color underneath if it isn’t the exact size of the section area.
• Fill
  Your image will fill the section area completely, and part of the image may be cropped.
• Tile
  The image will repeat to fill the entire section area, and you can toggle the Tile size to choose the scale.

Set a template background image

To add a background image to an email template:

1. Open Styles in the editor sidebar.
2. Turn on Background image, then click Select image.

3. In Image library, click Select beside an image. To upload a new image, open Upload image and choose your file. If prompted to compare versions, choose Original or Compressed, then click Upload.

Use Format to choose Original size, Fit, Fill, or Tile, as described above. Use Image position to align the image. If you choose Tile, use Tile size to choose Original or Fit.

Images set as background images for a template can cover the full width of the template area. You may want to set a Template background color in a similar shade to your image, as the background color may show while the image loads or if a recipient has images in email disabled.

Section backgrounds can cover the template image. To let the template image show through a section, turn off Background image and Section color, and set Content color to None in that section’s Styles tab.

When you finish editing a saved email template, click Exit to save your changes and leave the editor.

Inbox support for background images

While most inboxes do support background images, there are certain situations where they may not display. In these scenarios, the background color will display instead.

The following inboxes do not support background images:

• Outlook for Windows
• Yahoo! Mail (partial support)
• AOL (partial support)

Additionally, if a recipient has limited or slow internet access, the background image may load slowly or not at all, revealing the background color instead.

Additional resources