How to Use a Background Image in Your Email Templates

Using background images in your email templates can add dimension and character to your emails. While neutral, one-color backgrounds are more conventional, image backgrounds are a great way to help you establish your brand’s personality, so long as they are in line with how you format your company’s website. There are two main approaches you can take to using images as your background, which I’ll outline below.

Patterns

Patterned image backgrounds can make an otherwise boring background pop. Just remember that you should use patterns for your email background, not your content background. Using a pattern as your content background will be distracting and make the text of your email difficult to decipher, so avoid this practice. Also remember to set the image as repeating, so the pattern spreads across the entire email background.

neutral vs swirl

When choosing a background for your email, you will first have to decide whether you’d like to use a bold or subtle pattern. Which you choose should depend on your company’s website. If your site is made up of mostly neutral colors, a subtle pattern that incorporates this color scheme can liven your email templates. However, you shouldn’t use a colorful, flashy pattern, since it isn’t on-brand. The inverse is true if your site uses primarily bright, bold colors. The key is to adhere to your company’s branding — if you don’t use patterns on your site, you can still use a pattern that incorporates your brand’s colors in your email templates.

There a several sites that offer free patterned images that you can use in your email templates. Here are some of my favorites:

Alternatively, you can find a number of patterns on paid stock photo sites, like iStock.

Photos or Illustrations

Photos or illustrations are different from patterns in that they are not repeating. As such, they are a bit trickier to format for your email templates. If you don’t format them correctly, the subject of the image might be partially or fully obscured by the content area of your email. To use a photo or illustration in your email templates, you will first have to edit the original image to make sure it fits the dimensions of your email template.

Start with the image you would like to use. Companies often use images that interact with the content of their email in some way — for example, a pair of hands might the text or a puppy might peer out from behind the content background.

How you format your image will depend on the dimensions of your email. We recommend that your content width is between 500-700px. In the example below, our email width is 600px. Using a photo editor of your choice (we recommend either Photoshop or Gimp), change the dimensions of the original image to fit your email template. It may require some trial and error to get your image placement exactly how you’d like it.

The original image below is 200 x 300px. In Photoshop, I added 600px to the width of the image to account for the width of the email content, making it 800px wide in total.

Edit_Marissa_s_Background_Image_Template___Klaviyo

In Klaviyo, orient the image how you would like it to appear. You can choose from any combination of left/right top/center alignment. You can also specify whether or not you would like the image to repeat (which would make it more like a pattern). In general, the image should not repeat unless you’d like it to be tiled.

You will also want to make sure the background color of your email matches the background of your image. In my case, the image background background was white, so it was simple to find the hex code to match the email background. If you’re not sure what the background color of your image is, use this handy color picker tool for Google Chrome. You can change the image background color using your photo editing tool, or you can match the email background color to the image’s in Klaviyo.

Conclusion

Many companies use image backgrounds in their email templates to enhance their brand’s character. The two most popular type of images are patterns and photos or illustrations — choose which is right for your brand by matching your email’s tone and styling to what is on your website. When using an image as your email template background, the key things to keep in mind are whether or not you’d like the image to repeat and the orientation of the image. To double-check that these factors are correct, use an email testing service like Litmus to see what your template will look like across email clients.

Feature Launch: Product Feeds to Display Trending & Bestselling Pr…

7 Simple Ways to Get More Reviews for Your Products (and Increase the …

Responsive Design for Gmail is Here — But What the Hell Took So Long?…

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})

Back to Blog Home
Get email marketing insights delivered straight to your inbox.