How to Set a Background Image for a Call to Action (new editor)

read
Last updated at:

Overview

Learn how to layer text, images, and other email content over a background image using sections in the template editor.

This feature is available in Klaviyo’s new template editor, which is currently available in the Email Templates tab by clicking Create Template > Use New Editor.

About Background Images 

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

Content_background.jpg

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

Section_background.jpg

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 easily be able to 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. 

Select an Image 

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

Set and Style a Section’s Background Image 

Once you’ve chosen an image to use, add a new section to your template. In the section’s Styles tab, locate the Background section and toggle Image on. Click Browse, then upload your image. 

To choose whether the image spans the full width of your email or is contained within the email’s content, choose between Content or Section in the Display on setting. 

In the Format section, choose between the following options: 

  • Original size
    Your image will be displayed at its original size, and will not be constrained in any way
  • 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

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. 

Set a Background Color 

After adding your background image, open the section’s Styles tab and toggle Section color on. Choose a color that closely matches the color of the image you chose. 

While most inboxes do support background images, there are certain situations where it may not be displayed. 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

x
Was this article helpful?
3 out of 7 found this helpful