Emails can really feel a bit predictable with a picture right here, a block of textual content there… A technique to brighten up the subscriber expertise? Background photographs. They’re surprising and add one other dimension to your design, making your emails “pop.” When achieved nicely, they make your e mail really feel like one million bucks however are extremely simple to drag off.
Hold studying for:
What are background photographs? (And what’s the purpose?)
Background photographs are photographs which can be utilized to the background of, or behind, a component. As a substitute of being a most important focus of the e-mail, like a hero picture, they’re extra usually delicate and complementary to the opposite content material within the marketing campaign.
The foremost good thing about utilizing background photographs is that they can help you place further HTML content material on high of them. Not like different photographs, the place solely the picture itself can exist in that house, background photographs present layering potentialities, so you may have further photographs, textual content, or calls-to-action (CTAs) current inside that very same house.
Utilizing reside HTML textual content on high of a background picture, as a substitute of together with that textual content as a part of the picture, means your message is readable when images are turned off, making this a fantastic approach for creating higher, extra accessible HTML emails.
Apart from serving to to create campaigns that present a greater studying expertise, background photographs additionally supply a wealth of design potentialities, setting your marketing campaign other than the competitors.
Inventive methods manufacturers are utilizing background photographs
Miro positioned a background picture containing shapes behind their hero part, drawing consideration to the e-mail’s most important headline and messaging, which is overlaid utilizing reside textual content.
Uplers used a background picture to spotlight a reduction on their companies, with a coupon picture positioned behind a coupon code.
Figma added a delicate repeating background sample to the physique of this e mail, introducing us to their new whiteboard product. The sample they characteristic echoes the background discovered within the product.
Chipotle positioned a jumbo background picture behind this impactful jumbo hero and physique space, together with product pictures and a line sample. Excessive of this picture, they’ve an animated GIF with clear background, and reside textual content within the physique space.
Animated GIFs can be used as background photographs, like this instance from Adobe Stock, selling festive collections with hero content material together with reside textual content and a CTA button positioned on high of the animated background.
When interested by implementing background imagery, there are some design issues value making an allowance for.
To make sure all readers get the worth of content material overlaid on background imagery, it’s vital to be conscious of contrasts. Deal with the picture in a lot the identical method as you’ll a flat colour, and check the colours in your picture in opposition to the colours of your content material.
In case you design utilizing Figma, you may add plugins like Color Blind and Contrast to see whether or not you might be assembly Web Content Accessibility Guidelines (WCAG). There are additionally various net apps, like WebAim’s Contrast Checker, the place you may check the colours in your designs.
One other method to make sure readability is to maintain issues easy. Busy backgrounds could make it laborious to get the worth of any reside textual content you place in your picture. So it’s usually useful to think about your background picture as an enhancement fairly than a characteristic.
Stable colour fallback
As not all e mail shoppers will honour background imagery, design a strong colour fallback. Subscribers utilizing e mail shoppers that received’t assist your imagery can nonetheless have a fantastic expertise with a strong colour. Make sure to select a fallback colour that matches your design and contrasts nicely with its foreground parts.
Easy methods to code background photographs in e mail
Earlier than I stroll by means of the code, let’s see which shoppers will render background CSS styling and which of them want the assistance of a VML fallback.
The excellent news: Help for inline background CSS has improved, with webmail shoppers now absolutely supporting this technique, which means the background HTML attribute is not required.
The dangerous information: Sadly, Home windows 10 Mail simply doesn’t like background photographs. It received’t render inline CSS or the deprecated HTML background attribute. And making use of VML will trigger rendering points with an ‘picture can’t be displayed’ error message.
Electronic mail shopper assist for background photographs
Which e mail shoppers do your subscribers use?
Check out your personal e mail shopper market share with Litmus Electronic mail Analytics. See which e mail shoppers it’s worthwhile to optimize your background photographs for. (Trace: If Home windows 10 Mail is low, don’t sweat it.)
Now that we’ve obtained that out of the way in which, let’s speak code!
One of many enjoyable issues about bringing background imagery into your emails is that there are just a few other ways you may obtain this. You may fill a small part or cowl the physique of your e mail, use a single picture or a repeat sample, and you’ll change your background imagery relying on whether or not your reader is on desktop, cellular, Mild Mode, Darkish Mode, and even once they hover or roll over your picture.
Every approach wants a special strategy, so let’s check out the most effective methods to code these.
Width-defined or fastened background picture
When making use of background photographs, it’s all the time greatest so as to add your code to the cell of the containing desk. Making use of to another HTML aspect akin to <desk> or <physique> is unlikely to get assist from some e mail shoppers. Right here’s what this could appear like: