Browse by...
Home Resources Blog

**This post has been updated as of January 2019***

Adding background images to email? Our drag-and-drop email builder makes it easy to design beautiful, responsive emails that look great in all of the major email clients. You can add background images—with no coding required! To try it for yourself, sign up now for free.

If you have an existing HTML email template, Campaign Monitor’s “Bulletproof Background Images” (backgrounds.cm) has the code snippets you need to create email body background images. We also recommend this elegant, up-to-date method for adding background images to email.

We often get asked about the best way to add a background image to an email newsletter. Well, the good news is that there is a reliable way to get a repeating background image to surround your content in most major email clients, including Gmail.

In this post, we’ll walk through two techniques which can be combined to give your HTML email template some background image love.

The table attribute approach

On the web, HTML table tags exist only as relic of the ’90’s internet, but as far as HTML email is concerned, continue to be an essential ingredient when coding templates.

This is because they’re the most reliable method for creating layouts and elements; table attributes, including background, continue to be well supported by the major email clients.

In a nutshell, applying a background image to an email template involves nesting all your newsletter content in a table of width=”100%”, so it spans the width of the reading pane. Then, using the attribute, https://www.campaignmonitor.com/assets/uploads/background=https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/background_image.png, a full-width background image can be applied:


<table width="100%" border="0" cellspacing="0" cellpadding="20" background="https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/background_image.png">
<tr>
<td>
<p>Content on a pretty background image.</p>
</td>
</tr>
</table>

So far so good. The table will expand downwards as you add more content, so a repeating background image will tile just nicely until the end of your email.

The good news is that this works in most major email clients, including Gmail. Notable exceptions are legacy versions of email clients such as Outlook and Lotus Notes.

The CSS approach

In order to get background images to work in legacy email clients such as Outlook 2010 and prior, we need to include an additional snippet of CSS code:


body {
background-image: url('https://www.campaignmonitor.com/assets/uploads/https://www.campaignmonitor.com/assets/uploads/background_image.png');
background-repeat: repeat-y no-repeat;
background-color: #333;
margin: 0;
padding: 0;
}

The main difference between this CSS-based approach and using table attributes is that in some email clients, the background image will extend the entire height of the reading pane, instead of simply the height of the email, ie. the height of the table that all email content is nested in.

However, unless you have a fairly short email, you won’t be able to tell the difference.

You may be wondering if either of these two approaches should be used exclusively—and spoiler alert, the answer is no.

“By our powers combined!”

By using both the table attribute and CSS styles in your HTML email, you pretty much have the entire spectrum of major email clients covered. Don’t forget to set margin: 0; padding: 0; in body (as above)—otherwise your table background image won’t be flush with the image defined in your CSS styles.

And finally, if you’re really finicky (or indeed, send to a lot of legacy email clients), you can define a fallback color using the HTML tag/attribute pairing, <body bgcolor="#COLOR"> (where #COLOR is the HEX color of your choice). If you’ve already defined a fallback background-color using CSS, then this will only display in such legacy clients such as Lotus Notes.

Well, that’s background images in HTML email. If the conclusion you’ve come to is that HTML coding is a lot of work, don’t forget that our drag-and-drop email builder features full-width background images that display in popular email clients like Gmail—to try it for yourself, sign up for free now.

 

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free