How to Add a Background Image to an Email Template

read
Last updated at:

Overview

In this article, you’ll learn about background image options in Klaviyo’s classic and new editors. Level up your email designs by learning how to add background images to your email templates and sections. 

Add a Background Image to an Entire Email

Adding a Background Image in the Classic Editor

To add a background image to an email template, open the template and navigate to the Styles tab. Next to Background image, click Change image. Choose an image from your image library or upload a new one.

background_image_classic.jpg

Adding a Background Image in the New Editor

To add a background image to an email template, open the template and navigate to the Styles tab. Toggle the Background image setting on. Choose an image from your image library or upload a new one. 

background_image_new.gif

Once you’ve added your image, you can change how it is positioned and whether or not it should repeat (or tile) horizontally and vertically.

Images set as background images for a template can cover the full width of the template area. You may want to set a 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. 

Backgrounds for Content Blocks

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.

To add a background image for a particular block or group of blocks, use a section background image in Klaviyo’s new template editor. First, add a section to your template, then add one or more content blocks within the section. Open the section’s Styles tab. In the Background section, toggle Image on and choose an image. 

Once you’ve uploaded an image, choose Display on Content to constrain the image to the width of your message content. To let the image span the full section width, choose Display on Section and adjust the Content color to None

Learn more about section background images in our article How to Add a Background Image to a Text Block. 

Backgrounds for Blocks in the Classic Editor

Klaviyo doesn't support different background images for content blocks in the Classic Editor. However, there are several alternative options to achieve a similar result.

Using a Solid Color Background

To update the background color of the block, select the block and navigate to the Block Styles tab in the left-hand sidebar. Use the popup color selector or manually enter a hex value to choose the block's background color.

2017-09-14_13-32-39.png

Make a Block's Background Transparent

Block backgrounds can be set to transparent in the main Styles tab. This will affect every block that doesn't already have a set background color. For blocks where you'd like to establish a background color, click on each block individually and set a background color in Block Styles.

To make a block's background transparent so the template background will show, navigate to the main Styles tab in the sidebar. Delete the hex color for the Content Background value. Save the settings and refresh the page. 

2017-09-14_13-34-36.png

Display Text Over an Image

To use an image behind your call to action or another text block, use the image editor to add text content to your image. 

First, create an image block with the background image you'd like to use. Then, use the Edit Image option to add text on top of the image. This will embed the text in the image. This means the text will not be selectable by recipients (i.e., they will not be able to click links or copy & paste the text), but it will look the same as overlaying text on your background.

Interested in email design? Check out our Guide to Email Design to learn more.

Additional Resources

x
Was this article helpful?
53 out of 118 found this helpful