Adding a Background Image – Adding photos to the context of an email? Drag-and-drop email builder makes it easy to create beautiful, responsive emails that are compatible with all major email clients. There’s no need to know how to code to add background photos!
Campaign Monitor’s “Bulletproof Background Photos” (backgrounds.cm) has the code snippets you need to generate email body background images if you already have an HTML email template. This elegant, up-to-date method for adding background photos to email is also recommended.
Please Read >>> What Do Cc And Bcc Mean In Emails? The Difference & How to Use Them?
We’re often asked how to add a background picture to an email newsletter. The good news is that most major email clients, like Gmail, have a secure way to get a recurring background image to surround your content.
In this article, we’ll go through two techniques that can be combined to add a background image to your HTML email template.
Table of Contents
Adding a Background Image | the table attribute approach
HTML table tags are a legacy of the 1990s internet on the internet, but they are still an important component of HTML email template coding.
This is because tables are the most effective method for creating templates and elements, and the major email clients continue to support table attributes, including context.
In summary, inserting a background picture into an email prototype entails nesting all of the newsletter material in a table with a width=”100% ” that spans the width of the reading pane.
A full-width background image can then be added using the attribute background=background image.png:
<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, all has gone well. When you add more material to the table, it will extend downwards, so a recurring background picture will tile beautifully until the end of your email.
The good news is that most big email clients, including Gmail, support this. Legacy email clients such as Outlook and Lotus Notes are notable exceptions.
Adding a Background Image | The CSS approach | CSS is a technique for styling web pages.
We’ll need to add an extra snippet of CSS code to get background images to function in legacy email clients like Outlook 2010 and earlier:
body {
background-image: url(‘background_image.png’);
background-repeat: repeat-y no-repeat;
background-color: #333;
margin: 0;
padding: 0;
}
The key difference between this CSS-based approach and using table attributes is that the background picture in some email clients will span the entire height of the reading window, rather than just the height of the email, i.e. the height of the table in which all email content is nested.
You won’t be able to tell the difference unless your email is fairly short.
You may be wondering if one of these strategies can be used exclusively, and the response is no.
Adding a Background Image –“By our powers joint!”
You will pretty much cover the entire spectrum of major email clients by using both the table attribute and CSS styles in your HTML email.
If you don’t set margin: 0; padding: 0; in the body (as shown above), your table background image will be offset from the image specified in your CSS styles.
Adding a Background Image Summary
Finally, if you’re very picky (or if you’re sending to a lot of old email clients), you can specify a fallback color with the HTML tag/attribute pairing (where #COLOR is the HEX color of your choice). If you’ve already established a fallback background-color with CSS, it’ll only show up in legacy clients like Lotus Notes.
That’s how background images in HTML email work. If you’ve come to the conclusion that HTML coding is a lot of work, keep in mind that our drag-and-drop email builder includes full-width background images that appear in common email clients like Gmail—sign up for free now to give it a try.
