Emails can seem a bit predictable with an image here, a block of text there… Any way to liven up the subscriber experience? Background pictures. They are unexpected and add another dimension to your design, making your emails “popular”. When done right, they make your email feel like a million bucks, but are incredibly easy to pull off. Keep reading for: The Benefits of Background Images Examples of inspirational emails Design Considerations How to code background images What are background images? (And what is this for ?) Background images are images applied to the background or behind an element. Instead of being a focal point of the email, like a hero image, they are more often subtle and complementary to other campaign content.
The main advantage of using background images is that they allow you to place additional HTML content on top of them. Unlike other images, where only the image itself can exist in this space, background images provide layering possibilities, so you can have images, text or calls to action (CTA) additional in this same space. example of Image Masking Service live html text and bulletproof button on background image Using live HTML text over a background image, instead of including that text in the image, means your message is readable when images are turned off, making it a great technique for creating better and more accessible HTML emails. In addition to helping create campaigns that provide a better reading experience,
background images also provide a wealth of design possibilities, setting your campaign apart from the competition. Creative Ways Brands Use Background Images Miro placed a background image containing shapes behind their hero section, drawing attention to the email's main title and messaging, which are layered using live text. Miro email with background image Source: very good emails Uplers used a background image to highlight a discount on their services, with a coupon image placed behind a coupon code. Uplers email background image for coupon code Source: very good emails Figma added a subtle repeating background pattern to the body of this email, introducing us to its new whiteboard product. The pattern they feature echoes the background found in the product.