How to add an HTML email background image to your email (code samples included)

Emails are not only about the content and what it brings to the recipient but also about design and what emotions it evokes within your audience. Background images in emails are one of the most common ways to create a unique style for your newsletter, fast and easy. This article is all about them. We'll show you how to create an HTML background image for your email template, including every piece of code you'll need. Besides that, we'll cover how you can cut corners in your creation process and add background images without coding using Stripo.

What is the background image?

First of all, let's figure out what a background image actually is. At their core, these images are applied behind the email’s main content, serving as a platter on which you can lay down the rest of your email (texts, other images, banners, carousels, and more). Sounds pretty simple, and it actually is.

Why do you need them?

As background image sounds simple and, to some degree, an "old school" way of designing your emails, why bother with them? 

There are three distinctive benefits for why you should consider using background imagery when creating your own newsletter:

• the main benefit of a background image is that you can place additional HTML content over it, while in other scenarios, this content slot will be occupied with other content (for example, you have a choice between a background image and text, or only a pre-made image with the text already on it);
• text over a background image (as opposed to a flat image with text already on it) can be read even if images are turned off (some recipients can still turn off image display due to a limited or weak internet connection);
• using background images provides you with more opportunities for designing unique emails and highlighting your brand by mixing and matching backgrounds and various content over them.

As you can see, you have a pretty solid set of benefits that can make your email design process more diverse in terms of how you can create your email's look.

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

Before applying any background image to your email, you should make sure that it fits your design. As you swap and add background images and content, some may look good, while some can make your eyes melt. And we’ll now talk about the reasons for that.

Contrast ratio

The first thing you should think about when adding a background image to your email is the contrast. Contrast in email design is the difference in color, size, and other visual elements between different parts of the email that creates a hierarchy and improves readability.

It's crucial for overall email readability to match the right colors of your background image and its content.

When creating a background image and content on top of it, it is worth following the Web Content Accessibility Guidelines (WCAG). It's a set of internationally recognized technical standards for making websites and digital content accessible to people with disabilities. Anyone in the audience will be able to read your emails if you adapt your background image and content to these guidelines.

For an easier design process, all color combinations you use can be checked here.

Overall look and simplicity

Colors and how they match are important, but don't forget about the overall design and how your background looks in pair with your content. Always keep in mind the background’s overall density. If there are too many details, the text will be extremely difficult to read no matter how well-chosen the colors are. "The more the merrier" is not the case here.

Fallback version

Last but not least is the fallback version. Not all email clients support background images; as a result, your background may not be displayed at all. So when coding, you need to ensure a fallback version is available that will be displayed if the email is opened for email clients that may not display background images. You can create a fallback color for your background instead.

How to code your HTML email background image

Now, let's get down to the main part of our guide, namely, creating your background image from scratch. We'll walk you through the entire process step-by-step and explain every nuance you should know about when coding background images in emails. At the end of this guide, you will have an example of a very basic email with a background image and text on top of it that will look like this:

We'll be using a code example that you can paste into your own email later.

Basic HTML structure

First of all, we need to lay a foundation for our email with a background image. The code for it will look like this:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
</body>
</html>
 

It has two main parts that are cornerstones of our image, with a background image. The first one is the <style></style> part that will hold code for email styles and our background image as well. The second one is <body></body> where we need to place our content that will be above the email background image.

Adding table structure for compatibility

The next step is adding a table cell for our email. Since many email clients (especially older ones) rely on tables for layout, we’ll use a table structure to ensure that the email renders well across devices.

Copy this code and paste it in the <body></body> part.

<table role="presentation" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                <!-- Email content will go here -->
            </table>
        </td>
    </tr>
</table>
 

We place this code part here as the <body> section contains visible content that renders in the email. This code has two tables, basically an outer and inner one:

• outer table with width="100%" ensures that the layout can adapt to various screen sizes;
• inner table with width="600" contains the actual email content, and it is centered to create a clean, professional look that works across different devices and email clients.

Creating a foundation for the background image

Once we have dealt with the table structure, we need to create a "wrapper" for our future background image. At its core, we'll create a div inside the inner table that will hold the background image. It's an important part, as we create a dedicated container for our background image and give a clear separation between the content and our background image.

Besides that, the styles code we'll add later will be able to change how content and background look separately, which is vital for broader email design capabilities.

Take this code:

<td class="email-body">
    <div class="content">
        <h1>Background Image and Text</h1>
        <p>You can place your own background and content here.</p>
    </div>
</td>
 

And paste it here:

As a result, we've created basic content in the form of simple text above our background image.

Adding background image CSS code

Now, let's move on to the main part, specifically, making the background image appear as it should. Inside the <style> tag in the <head>, we’ll add CSS for the .email-body class to set up the background image and ensure that it looks good across different email clients.

To bring your background image to life, replace <style></style> with this code:

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .email-body {
        background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        display: block;
    }
    .content {
        padding: 20px;
        color: white;  /* Change text color to ensure readability */
        font-family: Arial, sans-serif;
    }
</style>
 

Our background image is placed in the email via a URL link, which you can replace here.

With this code, you have several options that can change the look of your background image and content on top of it. Let's discuss each one so you have a better grasp of what you can actually change here:

• margin: 0 removes any default margin around the body of the document. By default, browsers often apply a small margin around the edges of the page. Setting it to 0 ensures that there’s no unwanted spacing on the email’s outer edges;
• padding: 0 is pretty similar to the previous one but removes any default padding inside the body. Padding is the space between the content and the border of an element. Setting it to 0 ensures that the content starts at the very edge of the body without extra space;
• background-image is a key thing here and defines the background image for the element;
• background-repeat: no-repeat prevents the image from repeating itself, ensuring that it only shows once, even if it doesn’t fill the entire area;
• background-size: cover controls how the background image scales, and cover ensures that the image covers the entire area of the element, even if that means it might be cropped (in simple terms, maintains its aspect ratio while filling the area, preventing any gaps);
• background-position: center is needed to center the background image within the element;
• width: 100% sets the width of the .email-body element and ensures that the background image spans the email’s full width;
• height: 100% sets the height of the .email-body element to 100% of its parent container, making the element fill the available vertical space;
• padding: 20px creates a 20px space on all sides between the content and the edges of the .content container;
• color: white changes the text color inside the .content element to white. It’s particularly important when there’s a background image that could be dark, ensuring that the text is readable and stands out clearly;
• font-family: Arial, sans-serif sets the font family for the text to Arial.

Adding a fallback part

Now, let's finish our background image code with some important information: email clients can't load images set on the email’s background.

Copy this code and paste it between </style> and </head>:

<!--[if mso]>
    <style>
        .email-body {
            background: #f0f0f0; /* Fallback color for Outlook */
        }
    </style>
    <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
        <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" />
    </v:background>
<![endif]-->
 

The fallback code is relatively simple here, but let's briefly discuss what it does:

• background: #f0f0f0 is your fallback background color that you can change to the solid color fallback you need;
• <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true"> is a VML (Vector Markup Language) element used by Outlook to render background images;
• <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" /> defines the background image to be used in Outlook, so just replace the link to your own image if you need to change it;
• <!--[if mso]> ... <![endif]--> is a special block for Outlook, ensuring that Outlook can render the background image using VML, while other email clients ignore this part.

Full code

And that's pretty much it. Your background image email code is done. We'll leave you with a full code example so you can check if you did everything right while walking through our guide.

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .email-body {
            background-image: url('https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height: 100%;
            display: block;
        }
        .content {
            padding: 20px;
            color: white;  /* Change text color to ensure readability */
            font-family: Arial, sans-serif;
        }
    </style>
    <!-- Outlook background image fallback -->
    <!--[if mso]>
        <style>
            .email-body {
                background: #f0f0f0; /* Fallback color for Outlook */
            }
        </style>
        <v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="true">
            <v:fill src="https://img.freepik.com/premium-photo/multi-color-paper-texture-background_8493-4031.jpg" type="tile" />
        </v:background>
    <![endif]-->
</head>
<body>
    <table role="presentation" width="100%" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <table role="presentation" width="600" cellspacing="0" cellpadding="0" align="center">
                    <tr>
                        <td class="email-body">
                            <div class="content">
                                <h1>Background Image and Text</h1>
                                <p>You can place your own background and content here.</p>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>
 

How to add a background image to your email in Stripo

Knowing how your email background image code works from top to bottom is great. But what if you don't have time to learn it, or don't have any experience with the code at all? That's where Stripo comes in. Here's a short guide on how you can add a background image in our editor without writing a single line of code.

We'll show you how everything works using our default basic email structure that looks like this:

Open Styles settings

Click on the structure you want to place your background image in and then click on the Styles tab.

Activate the background image option

To start setting up your background image, click on the switch with the same name.

Pick a way of adding your background image

Once you click on the Background Image switch, you'll see a window with several options to add an image. Let's discuss each one briefly:

• you can add an image from your device by clicking on the main image adding field or paste the URL of this image there;
• Email and Project tabs show images from your galleries tied to email or the whole project (in our example, we have a blank email and blank project, so we don't see any image options here);
• Seasons and Decorations contain elements made by our design team that you can pick from (searching among different categories) and set as the background image;
• AI Image opens a separate window in which you can generate your own image using AI (more on that later);
• Photostock, Icons, and GIFs allow you to pick from a wide variety of free images, icons, and GIFs from different sources without leaving the editor.

Despite all these options, we'll use the image from our code guide to keep things consistent, and so you can see that there are no visual differences between manual coding and our editor.

Tweak your email background image

So we've added our background image to the structure, and for now, it looks like this:

It's totally okay, as our editor shows the empty container on top of the background image, marking that you can add something on top of your background. Let's now walk through the design options you can apply to your background image:

• Background Image Repeat allows you to turn on background repeat;
• Horizontal and Vertical Position let you set the exact position of your background image inside the element;
• Background Width and Heights allow you to set the exact background size of the background image or use presets like auto, cover, or contain;
• Border provides you with the option to make a border around your background image and set whether it will have a full border or per side only;
• Radius allows you to set the radius for your background image by choosing the Radius option for all corners at once or for each one separately.

Add the necessary content

The last part of working with background images in email is adding content on top of them. To replicate our example from the coding guide, we'll add two Text blocks in the same container.

After that, we add the same text from the coding example.

Then, we set the paragraph style for the first Text block to H1:

Finally, we set the top and bottom paddings to make them look identical to our first coding example.

And voilà, you have your background image and text on top of it without needing to create the code manually.

Generating support background images with GenAI

We've promised to tell you more about our AI image creation, so let's begin. You can generate any section background image using GenAI capabilities without leaving the editor.

Let's take a few steps back in our guide and click on the AI Image tab when adding an image to your background.

Creating images with GenAI is easy. All you need to do is:

• write a prompt to guide GenAI creativity in the way you need;
• pick an AI model (each generates images differently in terms of style, quality, and speed);
• set the preferred style of your image;
• set the aspect ratio;
• click on the Generate button.

Once clicked, you'll receive several generated images that you can apply to the background by clicking on the one you like. If you don't like the results, you can always tweak your prompt, AI model, or other options and re-generate the image.

Once the image is added, you can apply the same style settings as we discussed earlier.

Wrapping up

As you can see, creating background images in email is not that hard. Code samples are not too complicated, and there are not too many of them, so it will not take much time for you to create your own background image. However, you can do it even faster and easier using our editor and receive the same result without any hassle.