Add a background image or gradient

Article author
Miguel Panayotty
  • Updated

 

Add a background image

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

 

 

 

Add a gradient

It may seem unusual, but an HTML color gradient is actually a background image. Since some email clients—including Outlook 2007/13/17 PC and Outlook.com—do not support background images, you’ll need to set a solid color as a backup. The code included below will work well in most email clients, while falling back to a solid color in others.

 

To add a gradient to one area


1.
Click on the block where you want to add the gradient

 

2. Click on Styles

 

3. Open the Block Container

 

4. Select a Background Color

Don’t skip this step. This is the color that will display if gradients are not supported.

 

5. Expand the Background Image section

 

6. Click the rainbow-colored icon to show the gradient options

 

7. Choose the Start Color and End Color of your gradient

 

8. Drag the degree slider to adjust the angle of the gradient

 

9. Click I’m done to apply the gradient to your design

  

 

10. Leave Background Repeat set to `Repeat` and Background Position set to `0% 0%`

 

 

To add a gradient to the entire design

1. Go to STYLESHEET > Background > Email Container

 

2. Follow steps 4-10 above

 

 

 

Was this article helpful?

Comments

0 comments

Article is closed for comments.