How to Add Background Images in Emails with Stripo

Imagery in email design is and always will be a powerful tool used to communicate faster, set the emotional tone, and connect with your audience on a deeper level. We use it in the hero, in the product blocks, banners, everywhere.

Wondering how you can break from the “usual, predictable” places where you can find imagery and wow your subscribers big time?

We’ve got something for you…

Background images!

They definitely give more soul and personality to your emails and make them stand out from your competitors. We can even say that they make your email look like a “small website.”

Plus, it’s better to have a background image and then all the elements on top of it than to create an image-only email.

Why?

Think of accessibility. According to WHO, over one billion people live with some kind of disability. And, of course, we want every single person to have access to our emails no matter the circumstances.

Accessibility is not a luxury, it’s a MUST.

So, if a visually-impaired subscriber uses a screen reader to read your emails and your message is hidden in the images, they won’t be able to fully understand the email that you’re sending. And just adding alt text is not enough.

Unlike screen readers, voice assistants do not recognize alt text, so the best option here is to use live text + background images.

However, remember, background images should complement the whole design instead of taking the focus away from it. Implementing them may sound scary at first but no worries, we got you covered!
Keep it simple
First things first, always start with the colors, patterns, and elements used in your branding and choose the best combination possible. But remember, don’t overcomplicate it.

“Simplicity is the ultimate sophistication.” And that is said for a reason.
Source: The Better Creative
Just look at the example above. The background is quite simple — a textured black and white picture that compliments the colorful title and CTA. It certainly makes the elements stand out.

You see? Nothing complicated there but yet so powerful.
Create the image
When it comes to the creation process, after choosing the elements, textures, and colors, it’s time to make the pattern.

The most important thing to remember is to make the pattern repeatable so you don’t have any harsh lines in the middle of your email.

How do you do this? Let’s take this texture as an example.
Black and white pattern
If you were to put this as your background and repeat the pattern, it would have a cut because the top and bottom of the image are not the same. 

But, of course, there is a way to fix that.

Open the image in AdobeXD or Photoshop and try to find a perfect place to cut it. When the image is cut, you should be able to repeat it seamlessly.
Black and white pattern
If you are making your own pattern, try to make the top and the bottom fit. You can test it by copying the image and repeating it a few times. 
Implement it in Stripo
It’s implementation time!

  1. Choose the Stripe with the content.
  2. Turn on the “Background image” option in the “Content” tab.
  3. Choose your image.
  4. Turn on the “Repeat image” and “Align to center” options. (This step is a MUST!)
Screenshot of Stripo
BUT, if you’re planning to add the image as a background to the whole email, be careful and make it the background of the Stripe, and not the Structure. That will make the repeating pattern seamless.
Screenshot of Stripo
An extra tip: There is also the possibility of adding a GIF as your background image. That way, your emails will be waaay more fun and dynamic.

⚠️However, if you truly want to make your emails accessible, make sure that the GIF's pace is slow and that there are smooth transitions between the frames. Flash GIFs with fast-moving frames can trigger seizures in people who have photosensitivity.
Live emails vs. image-based emails
Background images can be used in more ways than just making the whole email patterned.

As mentioned before, live emails are always better than image-based emails. They are more accessible and can be edited quickly.

Let’s take a look at an example where we are using a background image to make the testimonial live text.
A testimonial
First, we create the container with text.

Then, we round the corners and add white background color (⚠️this will ensure that the dark mode looks good!).
Screenshot of Stripo
Imagine using the white rectangle with rounded corners as a background image in this example. In that case, the dark mode would switch the live text to a lighter color and the text would be hard to read, as you can see below. ⬇️
A testimonial that is hard to read due to light background
The next step would be to create the quotation marks that appear in the background of the text.

You can create them in an editing software of your choice and lower the opacity. When they are in light mode, they will have a white background and they’ll be visible, but at the same time not too visible when the background switches to dark mode.

Select your container, click on the “Background Image” option, and select your picture.
Screenshot of Stripo
A very important thing to note here is the placement of your image.

  1. Turn off the “Repeat image” option because we don’t want to repeat it in the container.
  2. Turn on the “Align to center” option.
  3. The “Position” should be “center” in both fields.
Screenshot of Stripo
By doing this you will center the image perfectly, no matter the size of the testimonial while keeping your mobile view perfect too.
Testimonials
Desktop view
Testimonials in mobile view
Mobile view
Let’s take a look at the dark mode now. Since we took all the steps described above, the section should be perfectly optimized.
Testimonials in dark mode

Some final thoughts

If you want to spice up your email designs, don’t think twice! Inserting background imagery is definitely one way to go.

Take a look at what we did for our clients and see the difference yourself!

Wet Noses' Campaign with a Black and White Pattern

An email design by The Better Creative for Wet Noses
Source: The Better Creative

Fire Protection Online's Campaign with a Background Image

An email design by The Better Creative for Fire Protection Online
Source: The Better Creative

Ego Fishing's Campaign with a Background Image

An email design by The Better Creative for Ego Fishing
Source: The Better Creative

Fire Protection Online's Campaign with a Background Image

An email design by The Better Creative for Fire Protection Online
Source: The Better Creative

Ego Fishing's Campaign with a Background Image

An email design by The Better Creative for Ego Fishing
Source: The Better Creative

1THRIVE's Campaign with a Background Image

An email design by The Better Creative for 1THRIVE
Source: The Better Creative

Ego Fishing's Campaign with a Background Image

An email design by The Better Creative for Ego Fishing
Source: The Better Creative

LETTSGO's Campaign with a Background Image

An email design by The Better Creative for LETTSGO
Source: The Better Creative

Giften Market's Campaign with a Background Image

An email design by The Better Creative for Giften Market
Source: The Better Creative
Milica Milanovic 
Junior Email Designer @ The Better Creative
In collaboration with Simona Gelova, Content Marketing Expert
August 5, 2022

Need help with your email design?

Leave us your email and we'll reach out soon!
The Better Creative © 2022 All rights reserved