How to add an image as a background

Learn how to add a background image to your Modern Editor design.

 

Topics covered in this article:

Email client support for background images

Adding background images in your design (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.

 

Email client support for background images

 

By default, a background image is repeated both vertically and horizontally. CSS declarations can be added to control which axis the image repeats by (x is horizontal and y is vertical) and where the image is positioned. Web browser email clients and Apple Mail have fairly good support for this CSS; however, Outlook PC does not support it.

 

CSS DECLARATION EMAIL CLIENT SUPPORT
BACKGROUND-REPEAT: REPEAT (IN BODY)

Supported in Outlook Mac.

Outlook PC will repeat both x and y, regardless of property value (ex, repeat-x or repeat-y).

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 ISPs have filters that block emails with background images since spammers have used embedded 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. For instance, if your subscribers have images turned off by default then your great looking image with text will come through with the Alt text and redirect link.

 

 

 

Adding background images to your design in Modern Editor

 

There are two types of background images you can add to your design in Modern Editor: repeating and non-repeating. 

 

PROPERTY DETAILS
repeat the image is repeated both vertically and horizontally throughout the whole design
repeat-x the image is repeated on the x axis (horizontally, one line)
repeat-y the image is repeated in a Y axis (vertically, one line)
no-repeat the image is shown only once in the background

 

Follow these steps to add a background image to one block in your design:


1. Open your design in Modern Editor.

2. Click on the block where you want to add a background image.

This can be any block from your preview panel.

 

3. Click on Styles.

 

4. Open the Container element.

 

5. Scroll down and expand the "Background image (Advanced)" section.

 

6. 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 design.
  • 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.

 

7. 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. 

 

If the background image needs to be added across the entire design, go to the STYLESHEET and select ESSENTIALS > Background. You can add the background image to your Body or Container element.

 

 

 

Have more questions? Submit a request
Powered by Zendesk