Add a background image

 

 

Email client support for background images

Background images do not have universal support, but they do load in most email clients, while failing gracefully in others. Email client support varies depending on whether you use a repeating image or a non-repeating one.

 

CSS DECLARATION EMAIL CLIENT SUPPORT
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 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: repeat
(IN #EMAIL-CONTAINER)

Supported everywhere! Except...

Not supported in Outlook at this time.

 

 

To add a background image to one block


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

 

2. Click Styles

 

3. Open the Block Container

 

4. Open the Background Image section. Upload or browse to your image.

 

5. Choose a Background Repeat option

Valid Background Repeat options
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

 

6. Choose a Background Position

 

Valid X values (Horizontal position)
left Default. Positions image left
center Centers image horizontally
right Positions image right
Length value e.g., 10px, 50%, 2em

 

Valid Y values (Vertical position)
top Default. Positions image top
center Centers image vertically
bottom Positions image bottom
Length value e.g., 10px, 50%, 2em

 

 

To add a background image across the entire design

 

1. In the STYLESHEET tab, select Essentials > Background

 

2. Add the background image to your Body or Container element

 

3. Follow steps 4-6 above