Learn how to add a background image to your Modern Editor email design.
Topics covered in this article:
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:
- Supported in Outlook
- Not supported in Android or Yahoo, but it fails gracefully
- 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)
- Supported everywhere! Except...
- Not supported in Outlook at this time
In addition to email client support, keep in mind some ISPs have filters that block emails with background images since spammers have used embed code to make their images download automatically. Test this out across ISPs 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 pros and cons 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!).
We'll cover how to add background images to your WordFly templates. There are two types: repeating and non-repeating.
1. Open your email in Modern Editor.
2.1 Click on the block where you want to add a background image, and go to the Container section:
2.2 If the background image needs to be added across the entire template, go to the Stylesheet instead:
2.3 Scroll down and expand the "Background image (Advanced)" section
3. Choose the background image display type - to repeat or not to repeat
This section allows you to choose if you want your image to repeat, or just have it show up once.
- Repeat: the image is repeated throughout the whole template.
- Repeat-x: the image is repeated in a X axis (one horizontal line)
- Repeat-y: the image is repeated in a Y axis (one vertical line)
- no-repeat: the image is shown only once in the background
4. Choose the background image position
The next box will allow you to choose where the first image is placed, which is the starting point for the repeating pattern, or the placement of the sole image if that were the case.