Adding background images to emails is the safest way to make them stunning, functional and optimized. Here is how to master this trick.
This article originally appeared on our sister blog Email Design Workshop. We think it can be of interest to MailUp readers too, so here it is.
For todayâs exciting workshop, we have a new feature introduced in theÂ BEE editor of the MailUp platform: you can nowÂ add background images to your emails. We promise this is going to be your new favorite email design trick, so letâs dive in!
Background images in action
Start looking for them, and youâll find images with text overlay in most emails in your inbox. Hereâs an example fromÂ Skillshare:
AnotherÂ fromÂ Huckberry:
And one fromÂ Brit + Co.:
One fromÂ Everlane:
And on andÂ on. Adding text to images is a great way to:
- Customize stock photos to make them your own
- EncourageÂ readers to click on an image
- Bring textÂ âabove the foldâÂ in your email (instead of positioningÂ text beneath an image)
However, these âemail background imagesâ arenât really background images at all.Â Thatâs because the text and the image are part of a single JPG, PNG, or other image file. The text isnât plain text; itâs part of the image, added in Photoshop or with another tool. As a result, if the image doesnât show up because of image-blocking, the text doesnât appear either. And changing the text requires editing the image.
Today, weâre going to show you how to create true email background images with plain text on top.Â This means that even if your images donât load, your text will be preserved, and changing the text does not require editing the image.
Weâll also show you how you can repeat an image across an entire row to create pattern or texture.
This new capability in theÂ BEE email editorÂ is one thatÂ designers have been asking for, so letâs take a look atÂ how it works!
Using email background images
Letâs use this module from a Litmus email as todayâs inspiration.Â Weâll recreate it in BEE.
Want to see how to add a background image in your email quickly? Watch our video tutorial and follow along our detailed steps below:
Choose an email template
Open the BEE editor within your MailUp account – or create a free oneÂ to see how it works.Â Choose a template to get started. We typically choose the basic one-column template.
Enable the row background image
Simply click on any row of content, and youâll see thereâs now aÂ Row background imageÂ option in theÂ StructureÂ menu in the right panel.Â Enable it, then click Change image to browse for a photo.
Browse for an image
You can findÂ free, high-resolution stock photos in BEE, so letâs look forÂ one. (You could also upload your own image or paste in anÂ image URL).
On the next screen, tap the âmyfilesâ folder or open one of your folders from the file manager.
Then, press Search free photos CTA at the top.
Drawing inspiration from the Litmus email, letâs search âstarsâ or ânight skyâ to see what turns up.
Choose an image to import, then insert it in the email. Here is the result:
Using the image placeholder thatâs already in the template, add the calendar image by dragging it in. Continue adding content placeholders for the Litmus logo, text, and CTA button. After dragging and dropping each module, take a look at how the email is shaping up:
Notice how the text, images, and even the CTA button sit on top of the background image. This allows for plain text and aÂ bulletproof CTAâemail design best practicesâto build the entire email all within BEE.
To finish up, add other necessary images and text, then format the styles, colors, and padding. Hereâs howÂ the finished product looks:
Pretty awesome, right? Email background images are simple and straightforward to use in BEE. With background images, yourÂ emails wonât just look beautifulâtheyâll be more functional and effective than ever before.
Background image settings
Once you selectÂ your background image, you can also adjust how it appears in your email. There are three key settings: Full width, Repeat, and Center.
Use them to findÂ the best fit for your background image. Select Repeat, for example, to create a pattern. This is especially useful if your image doesnât span the entire width of the email but you want it to.
As with any image in BEE, you can also edit it using the built-in photo editor. You can alwaysÂ crop, filter, add in specialÂ effects,Â etc.
Email client compatibility & setting up a fallback background color
Just like with any advanced email design, you need to keep an eye if any mobile and email clients support bacground images. According to our recent tests, the only email clients that did not show email background images were:
- Outlook 2016 on MACÂ OS X 10.10
- Lotus Notes 7
- Xfinity / Comcast email client
For those email clients (and for best results when images are blocked) make sure that you set a background color in the necessary row as aÂ fallback background colorÂ in those cases when your background image doesnât render.
To set a background color, simply select the row, then use your Structure menu to choose a Row background color or Content background color.
We hope you enjoy this new email background images feature, as weâre striving to build the Best Email Editor orÂ BEEÂ in short! If youâre not already usingÂ BEE, sign-up for aÂ free trial of the MailUp platformÂ and have access to additional templates and design features. Moreover, you can download our free Guide to Email Design to master all stages of email design!