How do I add an image as a background in my template? (Modern Editor)

Over the years we've received this question often: How can I use an image as a background in my template? And for many years background images were not recommended because of the lack of email client support. We've noticed that this is starting to change and now we know all the ins and outs so you can start using this if you are up for the challenge.

 

Topics covered in this article:

Email client support for background images

Adding background images in your email background (Modern Editor)

 

 

Email client support for background images

 

Let's take a look at the current status of background images in email clients. Historically email clients like Outlook did not support it. Now using CSS in the email code (and WordFly's Modern Editor email builder) we can get a background image to load in the email and work well in most email clients, while failing gracefully in others.

 

There are two types of background images you can set up. One is called 'repeating' which means it goes across the entire email. The other is called 'non-repeating' which means it is isolated to a part of the email such as the top portion of the email. Email client support varies depending on the type you are using.

 

Rundown of email client support:


BACKGROUND-REPEAT: REPEAT (IN BODY)

  • Supported in Outlook
  • Not supported in Android or Yahoo, but it fails gracefully


BACKGROUND-REPEAT: NO-REPEAT

  • Not supported in Outlook 2000, 2002, 2003 at all
  • Every place else either supports it or fails gracefully (in either the body or on other elements)


BACKGROUND-REPEAT: REPEAT  (IN #EMAIL-CONTAINER)

  • Supported everywhere! Except...
  • Not supported in Outlook at this time

 

In addition to email client support, keep in mind some ISP's have filters that block emails with background images since spammers have used embed code to make their images download automatically. Test this out across ISP's to make sure your email deliverability is not being compromised.

 

Instead of a background image, you might consider creating an image that has text built in. Weigh the pro's and con's of this route though. For instance, if your subscribers have images turned off in their email client then your great looking image with text will come through with the Alt text and redirect link (which you can style in Modern Editor so that can look great too!).

 

Learn more about email design best practices in this post!

 

 

Adding background images in your email background (Modern Editor)

 

We'll cover how to add background images either across the entire background of the email (repeating) or isolated to a single spot (non-repeating).

 

Adding background images across the entire background of the email (repeating)


1. Open your Modern Editor email so you are in editing mode


Go to Emails > Email Templates, click on the name of your email and select View/Edit, then select the green button 'Edit in WordFly'

 

2. Click on the HTML tab in the lower left corner of your Modern Editor email

 

3. Follow these steps to add a repeating background:


-Search for this in the HTML:

<style data-wfstyle="starter" type="text/css">
            body {

*Alternatively you could paste that code into the #email-container or any other container on a page.

 

-Insert this code after the body { , replacing the background color

 body {
   background-color: #ffffff;
   background-image: url(https://media.wordfly.com/dev/demo/background-repeat-stripes.jpg);
   background-repeat: repeat;

 

-Replace the image URL with your hosted background image

-Close the HTML editor by clicking the HTML tab again

-Save your email by clicking Save in the upper right corner

Note: You'll be able to see your background image in the Modern Editor if you adjust the body container to any width less than 800px. In the default state of any email (except for starter E) the email container width is 800px.


 

Adding background images to one area of the email (non-repeating)


Non-repeating backgrounds do work as well. Follow the same instructions above except use 'no-repeat' instead of 'repeating'. Example provided below:

 body {
   background-color: #ffffff;
   background-image: url(https://media.wordfly.com/dev/demo/background-repeat-stripes.jpg);
   background-repeat: no-repeat;

 

 

 

Have more questions? Submit a request
Powered by Zendesk