Email Best Practices:
Beautiful imagery is a great way to add interest and flair to your email marketing campaigns with minimal effort. However, when it comes to background imagery and email things can get a bit sticky.
While background imagery displays wonderfully, and for the most part, consistently across web browsers the same is, unfortunately, not true when it comes to consistency across email clients.
In our custom advanced Mailchimp templates, background imagery is controlled and made editable, via CSS (cascading style sheet) code embedded in the head of your Mailchimp template. The problem is CSS support isn’t yet equal across email environments with some clients supporting certain CSS functions and others not. It makes designing for email quite the challenge, to say the least!
On the web, you can force certain behaviors on a background image with various declarations—from stretching it to conform to its container to applying grayscale filters. However, with email, only a few of these commands will be respected, and not across all email clients. Understanding how background images behave in email is a valuable tool in any email marketing designer’s arsenal. [Litmus]
Back It Up
When it comes to background imagery it’s always best to specify a background color as close to the imagery color as possible. This allows your content to display over a complimentary solid background color when background imagery cannot be loaded due to lack of email client support or in the event your imagery cannot be reached due to server downtime, broken image links, images-off environment, etc.
Editable background color backup is always included in our templates when a background image is utilized. Don’t forget to update your background color if you update your background imagery!
Use Background Imagery Sparingly, And Where It Makes Sense
Utilizing background imagery heavily can result in some stunning campaigns, however, if those campaigns don’t render consistently across all email environments your message can become lost in translation. We recommend utilizing background imagery sparingly to enhance your campaigns via artistic touches that compliment your template framework and campaign content such as watermarks and repeating patterns. In the event, these elements are not displayed your campaign message still takes center stage.
Take a look at the examples below for ideas on utilizing background imagery in a complementary, not primary way, for best results.