FeedBlitz

Working with Background Images in the VME

The Visual Mailing Editor (VME) is a powerful toolset for creating and editing your email templates and campaigns. This post walks you through how to add background images to your template and mailings.

We’ll be covering four main sections:
(Click any of the titles to be taken directly to that section.)

What are background images in the VME?
Set a Background Color First
Adding a Background Image to your Entire Email
Adding a Background Image to a Content Block

And as always, if you have any questions while working in the VME or throughout FeedBlitz, reach out to Support for help.

What are background images in the VME?

Background images are a way to add an extra layer of pizzazz to your emails by uploading an image to either the background of your entire email or to the background of a single content block.

They increase your options for customization and offer an additional way to create unique, visually appealing emails for your audience to enjoy.

Having background images in your emails can look something like this:

Collage of five templates showing different uses of background images.


In the VME there are two main areas where you can add and work with background images—on a page level and on an individual block level. The editing for both are similar, but to keep things simple we’ve broken the processes into separate sections. 

Set a Background Color First

Before you start to add a background image, the first step you'll want to take is adding a background color to the page or block you'll be working with. This sounds a bit counter-intuitive, but there's a very good reason for this: Not all email apps (ahem, Outlook) behave nicely with background images. Having a background color to your image ensures your text will still be visible, even if the image doesn't appear. 

When it comes to designing your email templates, it can be helpful to visualize the layers of the template:

A three-layered diagram illustrating the layers of an email template - color is the base, images go on top of the base, and your content (text, icons, etc.) are layered on top.

Similar to a 3-layered cake, the background color is your base layer, the background image is layered on top of that, and your content (your text, icons, etc.) is on top of both. 

This is why we always recommend setting a background color-matched to your uploaded image, in the event the image does not render properly - you will have a base layer in place, no matter what. 

The background color will always default to white unless set from either the Page or Content Block settings as shown below. 

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard showing where to set a background color for the block in the event your image does not render.

Now that we have our base layer in place, let's get down to it and work with background images!

Adding a Background Image to your Entire Email

Adding a background image to your entire email adds a new dimension to the content you’re sending. A lovely nature scene, urban details, or even your logo expanded or on repeat works to help solidify the imprint your brand (or blog) on your subscribers.

These two screenshots show emails where an image has been added as the background:

A screenshot showing two templates that use a background image for the entire email. The first is a snow landscape and the second a brick wall.

Use the Properties tab to add a background image to your email.

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Properties tab highlighted, showing where you will begin.

Note: Make sure you do not have any block or section of your email selected in order to view this tab.

You will be working on the first tab, Page:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Page tab highlighted where the background information can be found.

Where the background settings are shown at the bottom of the tab here:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Background Setting drop-down menu highlighted.

From the drop-down, change the setting from Background color only to Background Image:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Background Setting drop-down menu highlighted showing Background Image.

This will expand the tab, showing your image settings:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Background Image settings highlighted.

From here you can then select the three dots ... button to upload your own image or browse a free image to use from Unsplash or Pixabay. If you already have a URL for your image, you can enter that here as well. 

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with a highlight noting where you can select or upload your background image.

Once your image is uploaded, you will then be able to adjust the size, frequency, and placement of your background image:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with additional image settings and options highlighted.

And that’s it! That is how you can easily and quickly add a background image to your entire email.

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard showing what a background image looks like once chosen.

Adding a Background Image to a Content Block

Taking background images a step further, you can follow nearly the same steps above to add an image to the background of an individual content block. There is a lot of room for customization and flexibility as you can see in the examples below:

A collage of three screenshots showing different ways to use background images in emails.

For this walkthrough, we’ll be creating the birthday email. We will start with a one-column text block from the Content > Text tab.

Once you’ve added your content block, we’ll begin working on the Properties > Block tab.

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Block tab highlighted for the selected content block.

The background setting is the last option for this tab. Change the drop-down setting from Theme Default to Background Image:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Background Setting drop-down menu highlighted and changed to Background Image.

Your image settings will then appear below the drop-down:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Background Setting Image settings highlighted and available.

Start by uploading or choosing your background image here:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with a red box noting where you can select or upload your image.

And your image will automatically be added as a background to the block:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard showing the background image uploaded to the selected content block.

The next few steps depend on your desired look for your email. The image we have chosen is tall, and we’d like for the full image to show, so we’re going to change one of the settings to force that to happen.

Right now the Size is set to Fit the content—content refers to the text of your content block. (First, we’ll adjust the background image and then work on the text.)

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard with the Block Size and Image settings highlighted.

Set this option to Show all the background for your full background image to show:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard showing the setting adjustment for the full background image to appear.

This brings your full image into the email template.

Fit the content is an excellent option if you have more content than image or did not crop your image before uploading. Below is an example of using the Fit the content setting for a background image:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard showing a background image set to fit the content.

Working with the settings and placement of the image helped us achieve the desired outcome for this particular template.

Once your background image has been placed to your preference, it’s time to edit your content, or rather—the text which is layered on top of the image.

For this template, the text was edited using the Text Styles tab:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard highlighting where you can edit text.

And here with the text editor, to achieve the desired outcome:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard highlighting another option you have to editing text.

Another step you can take is editing the position of where your text appears in the Properties > Content tab:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard highlighting where you can adjust the placement of the content within the block. This screenshot shows the content at the top of the block.

Where the text naturally lands with the default settings worked great for this particular image and template. However, you can see below for an image that works better when the content is vertically aligned:

Screenshot of the Visual Mailing Editor in the FeedBlitz dashboard highlighting where you can adjust the placement of the content within the block. To highlight another option, this screenshot shows the content vertically aligned in the block.

As mentioned above —there’s room for a lot of customization and flexibility when working with background images in content blocks. It all depends on your desired outcome!

And that is how to work with background images in your email templates. As always, if you have any questions, please don't hesitate to let us know. You can find all of our great support resources and how to get in touch with us via email, chat, or phone on our Support Page.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.