Add a background image or gradient

Article author
Miguel Panayotty
  • Updated


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.


Background image 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

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

Supported everywhere! Except...

Not supported in Outlook.


Note: Showing an alternate background image on desktop vs. mobile is not supported. (The image will not display on mobile.) However, mobile styles adjustments to the same image are supported. If you only need to adjust the position of the same image on mobile, it can be done in the mobile stylesheet by updating the Background Position property. For example, `center -100px`.


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



Add a background image to the entire design


1. In the Stylesheet tab, select Backgrounds from the Start Here section


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


3. Follow steps 4-6 in the section above




Gradient support

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


Add a gradient to one area

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%`



Add a background gradient to the entire design


1. Go to Stylesheet > Backgrounds > Email Container


2. Follow steps 4-10 in the top section