How to Add Background Images in Emails with Stripo (2022)

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!

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.

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.

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.

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.

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. 

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!)

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.

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.

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.

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!).

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. ⬇️

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.

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.

By doing this you will center the image perfectly, no matter the size of the testimonial while keeping your mobile view perfect too.

Let’s take a look at the dark mode now. Since we took all the steps described above, the section should be perfectly optimized.