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” 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, background=background_image.png, a full-width background image can be applied:
<table width="100%" border="0" cellspacing="0" cellpadding="20" background="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('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.