What are Background Images?
Background images are applied to the background of a section in an email. Instead of being a main focal point, like a header or hero image, background images are more subtle and complementary to other content in the email. The main benefit of using a background image is that you create additional layering possibilities in your email.
Before you add a background image, keep the following in mind :
- Background images should be an addition to other content, not a replacement for it.
- Keep your image simple, avoid using any loud patterns that might steal the show.
- Background images do not define the size of a section, the content inside does.
- In order to display, a background image needs to have content in the section.
- A background image should be an image, don’t use text in a background image.
- Always send a test email so you can view how your background image will look on desktop and mobile.
How to Select a Background Image
About 50% of emails are opened on a mobile device. A landscape ratio image may look good on a desktop, but it won’t scale down properly to a mobile device. Mobile devices typically provide more of a portrait view, so you want to make sure that the image sizes well on mobile and desktop. To access the background settings, you will want to hover over the section you want to edit and select Edit Background.
There are a few different settings for background images in the Visual Email Builder.
Extend background to the edges of the screen
A background image can fill the width of the email or the full browser width. Turn on the option to Extend background to the edges of the screen to fill the browser width. Leave that option turned off to fill the width of the email only.
Fallback Color
Select a fallback background color in case someone has images blocked or the email client doesn’t render background images. If you add a text block over your background image, make sure that it will be visible over the fallback color.
Background Image Size
Select Auto, Cover, or Contain to set how the image should size within the section of the email.
Background Image Repeat
Select if the image should repeat vertically, horizontally, don’t repeat, or tile. Repeat a single image, but don’t repeat an image that’s already a repeating pattern.
Best Practices
For clients that don’t support background images or for people who have images blocked, you should always include a fallback background-color property with a color that contrasts the content on top of it to ensure that your message is readable.
See a full list of background image support for desktop, mobile, and webmail clients in Litmus’s Guide to Background Images.
Recommended Sizes
Background images will fill the width of the container by default, but the height of the section is determined by the content inside. With this in mind, background images shouldn’t be greater than 1200 px wide. Drip does not have a recommended height for background images because the height depends on the image and on the look of the email you’re creating. Think some images are tall, and some images are short.