← Customize 1200+ templates for your next newsletter

Workshops

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, they help 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.

Our Reader Score:

Total: 1 - Average: 5

Emily Santos
Emily Santos

Emily Santos is a Content Specialist with experience as a Brand Strategist and Designer.