4 Tips on How to Add Background Images in Email Template
Hope you’re doing great! We have updated this article written by Paul Shuteyev and decided to pay more attention to background images issues. You’ll learn basic tips on how to implement background images in newsletter. Let’s start!
Everybody use images in email messages. Images are great attention-catchers and it’s extremely important to use them the right way.
Adding background images requires making changes in HTML code of your email messages. If you know nothing about custom coding – the right way is to use free ready-made templates that are already loaded into your email software. Choose the one you like, add content and send a campaign.
Whether you are an advanced user familiar with HTML and CSS and have some skills in working with these codes, our article will help you to create colorful background for the email template.
Why to Use Background Images in Email
The main background benefit is that you get additional layering possibilities and you can place the key message as well as other pictures or call-to-action on top of background images.
In a sense of beauty, it’s always good to get a nicely designed newsletter. Besides, you are allowed to use animated GIFs as a background.
Remember that background images should be simple and without loud pattern that can steal the show. It’s just the addition to your content to make newsletter great-looking. The best background images are of quiet style and can include graphic elements (textures, gradients, patterns, etc.).
Best Sizes and Formats for Newsletters Images
Image format for email
When you choose or create an image to use for email campaign, make sure, you save them in the correct format – PNG, JPG, or GIF. Each image format has own specificity, for example images saved as PNG retain transparency.
Size matters! It’s good to stay in touch with your ESP and this is the time to ask your ESP about the limits of image size and weight. See, some ESPs compress images that are too big or weight too much – all this affects the quality of the image and the total impression of your message. If your image is too large then email can be blocked by a firewall or email filter and your email campaign won’t reach the recipients.
Remember, that more than half email messages people open using mobile devices. Prepare the newsletter mobile-friendly version with smaller images size to avoid issues with long time email loading, etc.
As an ideal email template size sways between 600-650px, it’s better to use background images of exactly the same size. This concerns images saved as PNG and JPG file.
To use GIF image as a background image and cover the entire content area, keep its size as 1280px wide. Want to highlight that GIF files are supported by almost all email clients except Outlook 2007-2013 – their user will see only the first frame in animated GIF file. That’s why put the most important frame first. Generally, the number of frames in animated GIF should not exceed 10 units.
Let’s find out how to work with background images in our email sending software – Atomic Mail Sender.
How to Add Background Images – Atomic Mail Sender Rocks
There are four main methods of adding background images:
- Using table attributes
- Using inline CSS
- Using embedded CSS
- Using bulletproof backgrounds
Let’s imagine, you already have an HTML email template and just want to add a background image to it. As newsletters vary according to business branches and coding varies too, we’ll take one from Atomic Mail Sender ready-made templates to show you the main principles of background implementation.
1. Let’s add background images to email using table attributes
If you have a look at the email template designed by tables, you’ll see the first main table that includes other smaller table-blocks. This is what we need – this first opening table and the attribute background.
Mentioned attribute can be applied to the whole table (tag <table>) or to the table cell (tag <td>).
The background attribute contains a URL where your background image is hosted.
<td width="100%" align="center" bgcolor="#fcd539" border="0" cellspacing="0" cellpadding="0" background="http://path-to-image/title.png"></td>
For clients that don’t support background images you do need to mention the background color (bgcolor) as well as ALT-text. Be scrupulous about choosing the color for the background. All the content elements and the message text should be clearly readable in the background. Some readers do not turn images on, that’s why it’s good to use ALT-texts. Don’t use just ordinary alt-texts you may use for SEO needs. Imagine this is the only alternative to image and use your ALT-texts as call-to-action. Make them sound good and catchy! You will profit from this. Either a reader turn images on to see the image or just follow the link to see the offer.
Without background image but with a background color:
If you do not own a website, we recommend you to save the images you use for background on free services or public servers. Always type the absolute path to your background image file.
2. Inline CSS Code for Background Image
The operating principle is the same as mentioned above, change the code of the first opening table or table cell. The difference is that you work with the style attribute.
The HTML code example:
<td width="100%" align="center" style="background-image: url(http://path-to-image/title.png); background-repeat: no-repeat; background-size: cover; background-color:#fcd539;" border="0" cellspacing="0" cellpadding="0"></td>
- background-repeat: no-repeat; – this property prevents image from repeating like:
No repeated background (size matters, as we mentioned above)
- background-size: cover; – this important property allows to cover all the available newsletter space with your image. Especially useful for mobile email campaigns when you are limited with newsletter space and the image required to be resized.
It’s good to have a link that leads to a WEB-version of your email message. Sometimes it’s impossible to see images, this may happen because of an error or because of bad email client. It’s a good practice to have a link to a WEB-version of the email. Just make it sound like “Problem viewing images? Click here for a WEB-version”
3. Background images for email using embedded CSS
First of all, you need to add a css <style> tag in the head of your email message. Make sure there are no other background properties within the existing HTML code, otherwise they can override the background image.
The CSS code example is the following:
Then we are goes directly to embedded CSS in email template. Use the class to set up the correspondence with the css style you’ve written in the email head.
4. Bulletproof background images in email
Bulletproof principle for background images combines the HTML attribute usage with Microsoft’s Vector Markup Language (VML). This approach helps to create email template with background that will be displayed in every email client.
Today there is a free server to generate the bulletproof background code automatically. Go to https://backgrounds.cm/ and try it.
Just specify the URL of the desired background image, specify the backup color and choose whether this rule should be applied to the entire body of the newsletter or only for one cell in the table. As a result, you get the HTML code ready to insert into your template.
How Background Images Are Displayed in Email Clients
A Little More Tips
- Recommended email width – 600px (max. 650px). It is the guarantee that your email message will be displayed correctly on every device and in every email client
- Recommended email height depends on the content length but should not exceed 200 pixels at best.
- Recommended font size – 14px, with the line space 1,5.
- The text color should contrast with the background color.
To tell you the truth, there are no precise rules that will determine the size of email elements so you can experiment with shapes and sizes, but do not make the template too unusual and strange for users.
Background image is a good way to decorate template. But do not replace email content with the image only. Do not create entirely image-based emails. This is still an actual email marketing mistake. Sometime you open an email and all you see are squares with red crosses. Sure I don’t allow images from all the senders, and this means I will definitely miss this email, even if this wasn’t a scam or spam. Make sure your email looks informative and useful without images.
Use Atomic Mail Sender free email templates for inspiration and creating own branded emails with bling-tastic background images. Let us know if you have any questions in the comments below.