Beefree blog

Tutorial: How To Add Background Images on Emails and Landing Pages.

Emily Santos
Emily Santos
Apr 15, 2022
Tutorial: How To Add Background Images on Emails and Landing Pages.
Tutorial: How To Add Background Images on Emails and Landing Pages.

The continuous rise in email marketing makes finding new ways to enhance the subscriber experience increasingly important. Email is no longer just a few words of text on a screen. GIFS, animation, and even interactive content is becoming the new norm. Responsive background images joins the ranks of a rich email experience.Background images in newsletters and landing pages are not new by any means. But until now, only those with knowledge of HTML and code could take advantage of this design style.While it’s possible to create background images on tools such as Photoshop, the problem with image-based emails is that it doesn’t allow for additional HTML content to be placed on top. In the instance of image-blocking, this means that any text on the image cannot be read. This hurts the readability and responsiveness of your email.Keep reading to learn more about how BEE Pro has made it possible to quickly add responsive background images to emails and landing pages.

BEE Pro Saves The Day 

The new background image feature inside of BEE Pro makes it easy for everyone to add responsive background images, without the need for code. This drag and drop tool allows for design flexibility and unlimited layering capabilities.With background images, you have the freedom to layer content such as text and CTAs to enhance the overall message of your email or landing page. Unlike with image-based emails,even if your subscribers have their images turned off, the readability of your content won't be affected. In terms of responsiveness, BEE Pro ensures the background image feature adapts to all screens resolutions.While background images make emails and landing pages look professional and grab the attention and interest of the reader, it does so much more. Background images support your message and allow you to set a scene that evokes emotion and enhances your reader’s experience. In return, your readers are likely to take action making your email marketing efforts effective.

Background Images In Action

Unlike GIFS and hero images, background images aren’t meant to be the main focal point of your emails or landing pages. Instead,theyhelp support and tie in the contents of the message to make it look more professional and entertaining.Here are some examples of how our Designer Community uses the feature to create email templates with background images.This email template by Andrea Dall’Ara uses a background image to create a scenery that makes the page more engaging and allows it to stand out from the dozens of other “Happy Easter” emails your clients may get that day.

Happy easter template

In this email by Jesús Albusac, the row background image feature provides a visual representation of the message and helps evoke emotion in the reader.

Juneteenth Email Template

In this newsletter by Kristina Bazaeva the row background image is subtle and adds texture to emphasize the content.

National Garden Month Email Template

Lastly, in this email by Navid Nosrati the background image accentuates the focal point of the email and the content.

Animal email template

Step-by-step guide: Adding Background Images to Email & Landing Pages

Now that you’ve seen how background images are implemented, you are ready to start creating! Choose a template from our catalog or start from scratch. Then, watch the video or follow along with the steps down below:

Toggle On the “Background Image” Feature

In the BEE Pro editor, click on “setting” and toggle on “background image”

toggle on the background image feature

Choose an Image

Click on “Change Image” to upload your images. If you don't have any images, you can search for free stock photos within BEE Pro.

Choose an image

Fit to Background, Repeat, Center

You can choose to apply the background image to the entire design, a row, or just to a content area. At that time, you can also choose from

  • Fit to background: Stretched the image to cover the entire email or landing pages
  • Repeat: Places the image side by side to create patterns. 
  • Center: Sets the image at the center of your email or page and keeps the image’s original size.
Fit to background, repeat, center

Start Layering! 

Overlay text and CTAs on top of images to allow your design and text to work together. Layering content provides a better reading experience and makes communication more impactful.

Ready to Explore The Unlimited Design Possibilities?

If you’re not already using BEE Pro, sign-up for a free account. Use the background image feature and start creating beautiful, professional, and engaging emails and landing pages that delight your readers every time.

Related posts

How to Use Beefree with Slate CRM to Create Higher Ed Emails Faster

Discover how universities use Beefree with Slate CRM to streamline email design, improve branding, and collaborate across departments—without touching code.
Luca Penati
Jun 9, 2025

Getting Your Email Team and Strategy Future-Ready

Your sanity-saving guide to the evolving challenges in emails, with actionable steps to help get your email team and strategy future-ready.
Emily Santos
May 28, 2025

Busting the myth: Complex email designs are only possible with code

In this post, we’ll debunk the myth that advanced email design requires code—and show you how tools like Beefree are transforming how teams create beautiful, advanced designs at scale, all while freeing up developer resources.
Beefree team
May 22, 2025

Stay informed on all email trends

From the latest creative design strategies that inspire your next campaign to industry best practices and tech advancements, our newsletter is the go-to for all things creation.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
By clicking Subscribe you're agreeing with our Privacy Policy