a How To Guide (with Examples)

A couple of months ago, I got an email from HubSpot Academy about the different courses available. I remember this part of the email specifically because I loved the use of a background image. I’m a huge fan of how companies find great ways to maximize their email content — and one way to do that is with a background image.

Rather than an image being used as the star of the email, background images are kind of like supporting characters. They tend to have the capability to be layered so you can add multimedia on top of them. Applying HTML to background images is crucial because they make your image — and the content on top of it — fit into the reader’s view of the email.

Check out this email I received from JetBlue, below. Their background images are simple, high-quality destination photographs, with a caption, hyperlink, and text detailing the destination. All of these factors are components of a great background image.

Note the text below background images is often an offer or exclusive. They’re great to use in this way because the image captivates the reader and the offer encourages them to click, raising that precious CTR for you.

Now, we’re going to go over how to create an email background image using HubSpot’s marketing tools.

1. Create a new email module

In your HubSpot dashboard, head over to the Marketing tab, then hover over “Files and Templates” and click “Design Tools.” This will take you to space where you can create new modules, like CTA buttons or new additions to your website.

From there, click on “File,” > “New file,” > “Module” from the popup box.

After selecting “Module,” a popup box should open. All you need to do in this popup box is check the box that says Email templates under “Where would you like to use this module?”

Make sure it’s a local file, and name your file appropriately. In the image below, I’ve named the file, “Background Image Email.” Then, click the orange “Create” button.

2. Create and name editable fields

Editable fields are components of your email that you can update and change once the module is created. We’re going to create rich text, so you can edit the text of your emails and the image. To do this, look to the right toolbar under “Fields.”

Click the “Add field” command and type in the search bar, “Image,” and name it “Background Image.” Then type in “Rich text” and name it “Content.” These names will help you notate what you’re working with (it really helps).

Your toolbar should now look like this.

To save time, let’s customize the fields now. Edit the “Background Image” field and add your image. I used a stock photo I had saved in HubSpot’s File Manager. You’ll be able to find all the photos you’ve uploaded into HubSpot clicking the Image space.

After you’ve added your image, time to add the text of your email. In the rich text editor, you can add a CTA, different fonts, and really jazz it up with your brand. I went very basic.

A good tip to note here is to make sure your text is white when you’re done; it’ll look better over the image if that image is dark. I highlighted my text because it was already white.

3. Add social links

You’re going to need some code. Web developer Stephanie O’Gray Garcia has sample code available to use for background image creation. You can find it here, and copy and paste it into the coding section. This is just the middle of the screen; think of it as a workspace.

When you open “Preview,” you should be able to see your text and background image.

In the code, there are sections where you can insert social links to your content. They’re in lines 27-34. When you see href=”https://blog.hubspot.com/#” or src=”https://blog.hubspot.com/#”, you can insert your social links in between the quotations. For the sake of the walkthrough, I took out this section.

4. Preview and publish

Your background image should look something like this. I’m sure it looks way more spruced up than mine, but this is a general idea.

This is a template for background image emails, which not only saves time creating emails but makes them look uniform. When customers open your emails, they should know who they’re receiving the message from and why. Email background images are a chance to add personality to business emails.

When I get emails from HubSpot Academy, I know, due to the background images and branding, that I’m looking at an email from HubSpot.

When I get emails from JetBlue, the background images and fonts are a clear indicator of the company’s brand. Email background images enhance your marketing strategy. Give them a try on your next email today.