Email Campaigns

Basics of using a background image on your emailers

by Erik Briones | 24 June, 2017

Hello!

As I have written the other day, creating HTML mailers are a bit different from creating HTML/CSS for a webpage.Tables are preferred, and some CSS implementations are buggy. One of the most common issues for mailers is using Background Images. We as designers know that background images with text overlay on it brings more impact to our design than just flat background colors.

Do you really need to use background images?

I always think that the best way to go around this problem is to “not” have the problem at all. ūüôā I don’t know if that makes sense but in a manner maybe you should rethink if you really need to have background images at all. It all goes down to creative direction.

Layout1
For example, if your text just needs to sit on a gradient color background, you can do so below:

If you noticed on the initial idea, the whole area needs to be either an image or a text with a background gradient image. However, on the right, you will see you can actually split this up into two parts. Part 1, is the TEXT and a FULL-color background. Part 2 will be a gradient image.

This way you can save up on the byte size of the mailer because you are using a smaller image size. Plus, since you are using an actual text, this can be read by the user without having to do the dreaded – “Click here to download the images”.

Layout 2
If you really need to add some graphical element on your background, then you will have to approach it differently.

See this example invite below.

The text is overlapping a background color with a flower overlay on it. You would think there is no other way to approach this design but to use a full image on your mailer, or a text with a large background image. But with a little tweak on the design you can actually divide it into 3 parts.

See the implementation below where the text is sitting on a  solid background color.

You will see that in this implementation I have divided it into 3 parts.

Part 1 – Text on solid background color

Part 2 – Image

Part 3 – Image

See you can have nice looking mailers without having to use background images at all!

If you really need to use background images

The folks at Campaign Monitor have created a very nice online code generator for implementing background images. They call it the Bulletproof background images.

All you need to do is add your background image URL as a link and then set whether it is for the Full email body (meaning the background image is for the entire mailer design) or a Single table cell (only one part or box in your mailer).

You can also set the Fallback color, which is great. So in case, your background image won’t load, a solid background color will appear. That way your text will still be readable, or the block/layout still holds value.

There are limitations to using background images. You can not set it to appear only on the top and not tile. Think background-position:top;. You only have two options. Either you tile it, or you will make it full size.

Remember, the implementation for background images uses VML specifications. To know more about it, or to see how you can tweak your mailer background color/image head to the MSDN VML specifications page

That’s it. These simple guide above should get you started on making your mailer more graphical and interesting by using background images or colors.

Again if you have questions or comments – if I may have missed something or there is a better implementations out there, do let me know via the comments below. I will be happy to hear your thoughts!


I am currently reading...

Sprint: How to solve big problems and test new ideas in just five days

Jake Knapp with John Zertasky & Braden Kowitz from Google Ventures