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
| 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. |
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 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.
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%`
Add a background gradient to the entire design
1. Go to Stylesheet > Backgrounds > Email Container
2. Follow steps 4-10 in the top section