US Data Corporation Direct Marketing Blog

How to Add Background Images in Emails9:33 am


By Melissa Cober

How to Add Background Images in Emails

Images in emails can be very powerful, especially when combined with a riveting headline and call-to-action. However, they have one major downfall: If readers have images disabled in their email client, they may never see your offer in the first place. This has frustrated email marketers for years, as this drastically reduces our ability to capture and hold the attention of our recipients.

There is however a solution to this conundrum: background images. By including your call-to-action as actual text on top of an image, rather than embedding the text within the image itself, you gain a distinct advantage – even if your readers have images blocked, they can still see your main message.

That said, it must be acknowledged that this is an imperfect solution. Some modern email clients, such as Apple Mail, display background images correctly; however, many older clients like Hotmail and Outlook offer very limited support for background images. Part of this stems from the fact that support for CSS varies wildly, which means that any background images set using CSS will be unreliable at best.

The most obvious drawback to this method is that your background images often simply won’t appear at all. This may not be a huge issue, as your text will still be there. However, if a background image contains lots of bright colors, it is common to change the color of the text to a light color like white so that it is easy to read against the image. That’s great if the image actually shows up – but if it doesn’t, you’ll end up with white text on a white background. And no one wants that. Even when background images do show up, they often don’t show up correctly. Sometimes the image repeats multiple times, isn’t aligned the way you want it, or the text above it appears unstyled.

All that said, there are ways to overcome these challenges, so don’t despair – you can still reap the rewards of background images in your emails. We just have to take some extra measures to make sure they behave themselves.

1.   Use Tables

Many email marketers try to set background images by applying it to the <BODY> tag. Although this does work in some email clients, the key word here is some – it is far from being universally supported. Instead, apply your background image to a table instead. If you want the image to cover the entire email background, just set the table to a width of 100% and then put the rest of your email content inside that table. If you only want a portion of your email to have a background, just create a smaller table within your content and apply the image to it instead.

2.   Use HTML Instead of CSS

Lots of major email clients strip CSS out of emails entirely, or only obey certain declarations but not others. This is why, in general, it is important to use HTML for styling whenever possible in your emails – and background images are no exception. Instead of using the “background-image” CSS declaration, set both the background image and background color using the old-fashioned “background=” and “bgcolor=” HTML attributes.

3.   Accept the Limitations of Background Images

Unfortunately, there are some things about background images that we email marketers just have to accept – at least for now – so we have to plan accordingly. First of all, the image will always align itself to the left edge of its containing table, so forget about center-aligning your background images. You can however set the table to the width of the image and then center-align that instead. Secondly, background images will always repeat on both the X and Y axis. If you don’t want an image to be tiled, you’ll need to be diligent about setting the exact width and height of the containing table itself so that the image doesn’t start repeating.

4.   Set a Background Color

Be sure to set a fallback color in case your background image doesn’t show up, especially if your main text is light colored. This will maintain some of the visual appeal even without the image, and it will also avoid the problem of invisible text, which will ensure that readers can see your offer no matter what.

5.   Test, Test, Test

Send out a test email and view it in multiple email clients before you send your campaign. Even when we think we’ve thought of everything, unfortunately email clients will sometimes surprise us when we’re least expecting it – and no email marketer likes that. Be sure to view your email in Outlook, Gmail, and Hotmail at the very least, but really, the more clients you check, the better.

 

All this sounding like a lot of work? I completely agree – which is why I use a handy tool called the Bulletproof Background Images Tool to take care of background images whenever I’m designing an email creative. It generates code for background images that makes sure all of your bases are covered, no matter which email client your recipients use. Don’t forget to test your emails even if you use this tool, though – background images aren’t the only things that often don’t display correctly in emails. None of us want to end up with post-send remorse!

Do you think using background images in emails is worth the extra effort? Let us know in the comments!

Search

Newsletter

Sign up for our free mailing list to receive our newsletter, special promotions, and more!

Follow Us

Facebook Twitter LinkedIn Google+ RSS Feed

Like Us on Facebook

Learn More About...

Email Marketing

Marketing Strategy

Direct Mail Marketing

Data Cards

Fun Marketing Facts

Mobile Marketing

Social Media

Happy Client Highlight

Work Tips

Recent Posts

5 Tips for Convincing Clients to Try New Marketing Strategies

Is Direct Mail Marketing Still Effective with Millennials?

Email Marketing Relevancy Is More Important Than Ever

5 Black Friday and Cyber Monday Email Marketing Guidelines

Marketing 101: What is Direct Marketing?

Archives

April 2017

January 2017

November 2016

October 2016

September 2016

August 2016

July 2016

June 2016

May 2016

April 2016

March 2016

February 2016

January 2016

December 2015

November 2015

October 2015

September 2015

August 2015

July 2015

June 2015

May 2015

April 2015

March 2015

February 2015

January 2015

December 2014

November 2014

October 2014

September 2014

August 2014

July 2014

June 2014

May 2014

April 2014

March 2014

February 2014

January 2014

December 2013

November 2013

October 2013

September 2013

August 2013

July 2013

April 2013

March 2013

February 2013

January 2013

December 2012

November 2012

October 2012

September 2012

August 2012

July 2012

June 2012

May 2012

April 2012

March 2012

February 2012

January 2012

December 2011

November 2011

October 2011

September 2011

August 2011

July 2011

June 2011