timer ~ 9 min read
46614 views
rate it
26 August 2018

How to Add Background Image to Your HTML Email

Stripo / Blog / How to Add Background Image to Your HTML Email

You may evoke a desire in customers to read your message or they may want to leave and even delete it. This all depends not only on your generous offer but mostly on the style and structure of your newsletter email template. A design matters a lot.

Just by picking pictures and adding background images to HTML email you set the tone for the entire message.

All we have to do to create an effective selling email campaign is to make this tone cheerful.

Watch our short video for brief information regarding the types of backgrounds and how to add them with Stripo.

There are tons of information regarding the CTA, banners, and fonts available on the internet. But you can hardly find anything about the background images in email messages. What a loss — a background image is a good way to decorate the messages you send out, to make them look complete and beautifully shaped.

I have been searching online for more detailed information regarding HTML email background images, but all I have found is how to add a background to your email, such as Gmail or Outlook, outbox and how to make changes to the HTML codes.

The reasonable question here is where we can find bulletproof background images for our emails and how to add them to our templates. This is very individual — if properly done, any image can be the best solution for you.

Why is the topic of the article called a “How to add Background Image to Your HTML Email”? Because with other editors, in order to insert a background into a stripe or to apply one for the entire email — you’d need to have some skills in working with HTML codes. But not with Stripo. We have facilitated this process for your convenience — no need to make any changes to the HTML codes anymore.

Stripo-Background-Image

Things to know before adding the background image to your HTML email

Check the visibility of your emails

Due to the fact that the email background images are an essential decorative part of an email, marketers and designers try to add them to their messages to satisfy the customers with beautifully structured newsletters but some of the mail clients do not display the background images properly.

Which is why before sending out the emails, it is vitally important to check their visibility with Litmus or any other similar service. They will test your template out on over than 70 apps and devices and will provide you with the screenshots.

Stripo-When-Background-Colors-are-not-Displayed

Here, in the example, we can see that the background in a shape of a white frame, is not displayed in Outlook 2003, same as in Outlook 2016 and Windows 10 mail, but is displayed in 2007.

What should you do if the image is not displayed:

When writing a text over the background image/color, try to select the color which will contrast with the image and the email background color. This way your text will be legible anyway.

Note: the default email background color is white.

Different types of background images

Background images for the stripes

Only rare template builders allow you to set the background image for separate blocks. Stripo.email is one of them.

Stripo-Add-Background-to-the-whole-Stripe

I love this example for its tasteful but simple image.

Just look how easy it is to add a background image to email with Stripo:

  1. we inserted blocks: additional image, text, you may also apply “button” or a countdown timer over the background;
  2. picked the background color for the entire stripe;
  3. applied “background image” for the block.

Stripo-Apply-a-background-image-for-the-stripe

Note: Center it with the “center” button, turn “repeat” option on in case the image width or height are too small to fill in the whole stripe.

Place your text over the image, add a button if you wish.

Important: before emailing background image to recipients, customize the image you add — edit it in our embedded photo editor.

Add spacers/dividers… Why are we talking about the spacers here? Because in order to make your email design look more orderly shaped, you may use them to separate parts of blocks and even stripes. Especially appropriate to use when your background images are of the similar colors.

Stripo-Spacers-Dividers

In rare cases, you may want to extend the limits of your stripes. For this purpose, for the whole part, you need to set the background image in an email.

Stripo-extended-header

For example, the ReallyGoodEmails and Adidas extend their header that way. This unique design distinguishes them from others.

How can you do it with Stripo:

  1. upload the image you have picked/use any image from our bank;
  2. turn all the options on.

Background color as an alternative to the background image

Why would you need to set colors as a background for emails? Because some email clients like Microsoft Outlook may not display background images at all. Be sure to select a background color as close to the background image as possible.

The good news here is that it is pretty easy to set colors as the background. 

Here you may use all your rich imagination.
For example, the Outline company always places their news in the messages over the colored backgrounds. Besides, as the font colors they apply contrast, but not black text color.

Stripo-Background-Colors

You can apply different colors to separate blocks or for the entire emails. It is up to you.

The Samsung corporation places most of their emails over the black background and applies contrast white CTA button. Looks very classy.

Stripo-Black-Background-and-a-Contrast-Button

Background image for the entire email

When do we use a single background image for the entire email? Whenever we want to. As an email with background images look more complete. Use a thematic image as the background. If you are talking about food, add an image of the groceries, if you are writing about soccer,  why not use a soccer field or a soccer ball?

Stripo-Background-for-the-entire-email

What distinguishes a banner image from an email background image? Banner is what your customers see as the main image of your email, usually with text over it. And the background image is what they see only on the desktop devices. On the most mobile devices the latter kind of image will not be displayed at all.

Stripo-Background-on-desktop-and-mob-devices

This is the way the customers see your email with image background on the desktop and mobile devices.

Due to the background image in HTML emails, your newsletters will look beautifully shaped, structured, and well organized, but they have no influence on the body of your emails.

You can place a banner over it, your products’ snippets, contact information, frames, footer, header, etc.

How can you set the background image in email template with Stripo.email designer:

  1. on the tools panel, choose “Appearance”;
  2. click “General”;
  3. turn the “Background Image” option on;
  4. upload the image you like;
  5. turn on “repeat” and “center” image options.

Stripo-Turn-Options-On

Note: as some mail clients will not display the background image, you can set a background color as a default one.

Rules to follow

When adding background images to your email newsletter, you need to follow simple rules:

  • images you choose should be appealing and thematic. All details in an email should evoke feelings in the customers;
  • ask the designers or photographers for help, or build your one with a graphic design software;
  • add just one image as the background to an entire email;
  • pick only matching but contrast colors for the text fonts;
  • turn the “responsive image” option on. This will help your images to be displayed correctly both on mobile and desktop devices.

Some time back, in order to set a background image in an email template, we needed to possess some knowledge of HTML coding. Now, with the Stripo.email builder, we do not need to make any changes to the code at all. We don’t even need to know what it means at all ?
The system has simplified the whole process and facilitated our work.

Brief summary

  • HTML is not about coding anymore, it is about the quality of your emails;
  • Images you use in your emails should be of high quality;
  • Images should be with seamless structure. You may find lots of those on the internet;
  • Insert spacers to divide separate blocks into your emails;
  • Set background colors as a fallback for some email clients like Microsoft Outlook or find alternative solutions in this blog post;
  • Test your template prior to sending out.

Use our responsive HTML templates, apply background images in email newsletters and satisfy the customers with your beautifully shaped messages.

I wish you all the best and successful newsletters!

You might be interested in

previous next
banner9
06 June · 15 min read
10 Best Email Template Builders for 2022

Do all email template builders seem alike? You are now confused about which one to choose for your email campaigns, aren’t you? No wonder, as there are so many of them.  We will survey the most popular builders to find their distinguishing features to help you find the best HTML email builder for your current needs. I will try to create one template in all these editors with the same media files to see if the builders differ. The best...

Design Marketing Templates
24 May · 18 min read
Best Fonts for Email: Usage Tips and Tricks

One of the most striking concerns in the email production process is choosing the right font. Weight, height, width, color, shape, spacing… Does everything matter? Yes, it does, but also one of the most crucial things is to choose legible typography. In this post, we're going to show you how to choose the best professional font for email. Design beautiful emails with Stripo by using prebuilt templates Browse   HTML email fonts: General rules to follow There are three ground...

Design Templates
Greatest Examples of GIF animations in Emails_Cover Image
27 October 2021 · 10 min read
16 Great Examples of Animated GIFs in Emails

GIFs in emails will be of great use if you want to showcase your product, draw users’ attention to certain elements, or just slightly decorate your text. In this article, we have provided some of the best email gif animation examples. Examples of animated GIFs in emails Here’s a compilation of the best examples with GIFs in emails. Each GIF fulfills its mission. 1. Adidas (Source: Email from Adidas) Adidas used email animations to show what color options they have....

Design Marketing
08 April 2021 · 17 min read
14 Best Email Signature Design Examples

Good email signatures help us build our business and make a lasting impression on potential clients. Since email signature is the last thing people see in emails, we should make them creative and memorable. Let's examine useful tips and real-life examples of email signatures from famous companies and their appropriate use in personal emails and newsletters. Please be advised that all types of businesses require different professional email signatures with detailed contact information, job title, and much more. Use this...

Design Marketing Templates
Be always wide awake in recent email marketing news, guides, articles and how-to’s