- beehiiv Blog
- Posts
- How To Level Up Your Newsletter Design With a Custom Background Image
How To Level Up Your Newsletter Design With a Custom Background Image
Wow Your Audience by Adding the Perfect Background Image
Lenore Sterner & Nicola Vaughan
August 9th, 2024
This article has been updated to maintain its accuracy and relevance.
When creating your newsletter, what’s easily the most overlooked element? Not surprisingly, it’s the background.
The background easily gets lost behind the main stars of the show: your Call to Action (CTA) or the punchy first paragraph. An attractive background image will transform your newsletter, making it more eye-catching while allowing you to integrate more effective, visually engaging CTAs in your communications.
Adding a background image can involve using a bit of code or building out an image in a graphic design software like Canva, but the results speak for themselves. When done right, a background image will take your newsletter to the next level and wow your audience.
Today, let’s talk about background images – why you should use them, how to add them, and plenty of examples to inspire you for your next newsletter send.
Table of Contents
So you’ve started creating your email newsletter… but why should you consider using a background image? Well, if you want to engage your readers, background images can have subtle, but powerful effects.
Using a high-quality background image will make your newsletter more eye catching, visually textured, and professional looking.
Eye Catching
There’s no doubt about it. Email newsletters with background images are more eye-catching than those with boring white backgrounds.
You can use color or animation to catch subscribers’ attention and keep them reading your newsletter rather than navigating back to their inbox.
Visually Textured
Using a background image to create layers in your emails will provide texture and make your emails more interesting. You could overlay CTA buttons or text over your background image or have a seasonal background image with elements on top.
Creating layers and texture in your emails will improve the visual effect and allow you to implement better CTAs and content for your subscribers. Done well, it can also improve readability.
Professional
It’s undeniable that emails with beautiful backgrounds look far more professional than those without them.
You don’t need to be an email expert to create a professional-looking email if you have a range of beautiful background images in your wheelhouse. Your email newsletter will look more slick and will show that you clearly care about how your subscribers perceive your brand.
Background images are available from a range of websites including Freepik, Shutterstock, and Campaign Monitor.
Here’s an example of how Pottery Barn uses images for their background:
The image allows them to advertise their design services by showing a completed interior design.
So how do you get started with a background image for your next email newsletter? The best place to start is by researching some brands and going through your own emails to see how other companies have implemented background images.
Here’s a few examples:
Priceline uses layers (a photo over an illustrated blue swoop) to create visual interest and draw your eye.
Honey’s background has a bunch of subtle illustrations behind their main graphic design, creating a very cool effect.
David’s Bridal creates a cool vibe with the pop of pink over the background image of a woman modeling an “occasion dress,” showing that they sell more than just bridal dresses.
Prose brings the background to the foreground by the placement of the product in the image, creating a cool effect where the words actually look like they’re behind the product.
There are so many ways you can do this. For example, choose one of your brand colors that will dictate how your background image will look and keep this consistent across all of your newsletters. Alternatively, choose seasonal backgrounds that will change depending on the holiday.
You could even use animated GIFs to make your emails look more interactive. Whatever you choose as inspiration for your background images, make sure they have a purpose and don’t detract from the main CTAs/focus of your newsletter.
If you’re planning to write your own HTML code for your email background image, there are some important aspects you’ll need to bear in mind. Please note that at this time, you aren’t able to use this specific HTML snippet on beehiiv, but don’t worry. Keep reading for the solution.
Tables
Using tables when writing in HTML code is the way that you lay out the data for your background. This will consist of columns and rows, and it dictates how the content will be displayed.
Here’s an example of how table HTML can look, showing the width, style, and padding relevant to the email. You could also add a background default color that would show in case any images fail to populate.
<table role="presentation" width="860" style="width:860px;" cellpadding="25" cellspacing="60" border="5" align="left">
<tr>
Attributes
Attributes in HTML are additional pieces of information that dictate how the content will appear in your email. This could include how you wish to align your background. For example:
<align=“center”>
Alternatively, if you already have an image in mind that you’d like to use as your email background, you could add the link to your HTML like this:
<background= “www.imagelink.com”>
Style is another important attribute to consider. Style is used to decide details of an email background such as color. Here’s an example of how you’d use style to implement a block of powder blue color for the background of an email:
<body style="background-color:powderblue;">
Size
You need to keep size in mind when implementing a background image using HTML. Size is used to decide the height and width of an image, as well as the position it holds in the email.
You can also decide if you’d like your image to repeat when writing a longer email. The following code dictates that the background image will repeat vertically until the parent element is completely populated:
<background-repeat: repeat-y;>
Here’s some other examples of size elements that can be used in HTML:
<background-size: contain;> (Keep Background Contained to Original Size)
<img src= "link" alt="example text" width="800" height="600"> (Restrict Image To Specific Size)
Using HTML coding for a long email newsletter background image should be easier now, but make sure to pay attention to the best dimensions for your newsletter graphics.
You can also test out your HTML code using W3Schools, so you can see how it will look in your next email.
When using a platform to implement a background image, you’ll need to carefully consider the size of the background image you’re going to use.
If an image is too big, it may not load, leaving your email looking bare and bland. If the image is too small, on the other hand, it may look stretched or pixelated when trying to fit the size of the column in your email.
Plus, email newsletter background image size is a big factor in deliverability. Email weight, made up of file sizes in your email, determines whether or not your email can be delivered the way you intend it.
It’s always worth including a default background color on your emails just in case an image fails to load. This ensures that your email background won’t default to white if the image doesn’t appear.
Some users don’t automatically download images via emails, so a background color is useful in ensuring that all subscribers see an eye-catching background.
How To Add a Background Image to Your beehiiv Newsletter
At this time, beehiiv doesn’t allow you to use HTML to add a background image to your newsletter, but that doesn’t mean that your newsletter can’t look world-class. And don’t worry, I got you with a simple work around.
For example, Creator Spotlight uses a cream background, not an image. What they do use is a subtle cursor gif to let the black and orange take center stage visually:
The result is eye-catching, interesting, and classy.
Instead of using HTML to add a background as custom code, create a background image in Canva or Figma and add your text directly to the graphic. You can then directly embed the image into your newsletter.
What’s great about this option is the amount of creative control you have using a graphic design tool. You can go beyond the limitations of the platform and your coding options and even use fonts that aren’t considered to be email safe.
Just make sure to keep email template dimensions in mind and make sure that your email weight (the combined file sizes) isn’t too large, as that may affect your deliverability or cause your email to be clipped in Gmail.
It’s no secret that beehiiv is the newsletter platform built for growth with amazing monetization opportunities like the beehiiv Ad Network and Boosts – putting you in the driver’s seat to make money creating the content you love.
The best part is that beehiiv offers a free trial with no credit card required to try out all of the features and see if it’s a great fit for you. Get started with your free trial today.
Reply