Usually, designers choose a variety of styling and designing techniques for building great email templates. Images, animated GIFs and social media icons are only some of them. But in most cases, designers become oblivious to the background images, which appear to be a prominent design technique in today’s tech.
With this article, let’s go through certain aspects of email background images, and how they help build a rational email design.
What Is a Background Image?
When we include all the needed elements in an image, it becomes the focus of an email. A background image, on the other hand, stays behind the content as incognito.
Unlike the hero image, a background image is always subtle and complements other content. Background images support layering in email designs. It is possible to place other HTML content on top of a background image. That lets you add extra image, text, or buttons on top of the background.
The best loose-end of using background images is that the HTML content displayed on top of the background image will be accessible even if the image hasn’t loaded. That lets you display the important information reach the internet user even when images don’t load.
Layering up background and HTML brings you a vast meadow for designing the email, thus making it stand out.
See a sample of email designs with stunning background images.
Designing Background Images
The foremost thing to do before coding your background image is to design one first. Don’t make a mess by creating complicated designs. Keep in mind that you are giving something as just a background in addition to the content upfront. Such background images can enhance the content and avoid viewers’ distractions.
Textures, gradients and patterns can do great in background images. While satisfying a do-not-disturb for the email contents, they provide elegance and visual interest to emails. The following is such an example.
Just like the textures, you can use gradients, flat multi-colours or even animated gifs as backgrounds. For example, ahem!
Coding Background Images
We can go through the three most common methods for including a background image in an HTML email.
-
Using Table Attributes
One of the most primitive methods used for inserting background images is using the classic background table attribute. Even though this attribute is currently unfollowed, it works really well. Similar to the image attribute, the background attribute uses a URL value of the hosted image.
<td align="center" bgcolor="lightseagreen" background="http://url.of/image.png"></td>But, the background image with table attribute has its own drawbacks. One of them is that it repeats in X and Y directions depending on the size of the image. You also can’t either position or resize it, which is crucial with mobile devices.
Yes, what you saw is right. We have provided an extra bgcolor attribute in the code. This is given for two reasons. It respects the total aesthetics of the design when images aren’t displayed, and moreover, it helps to highlight the text and other content in front, if they have white or lighter shades.
-
Using Inline CSS, the much better way!
The most efficient and robust way to add a background image to email is by inserting an Inline CSS background-image inside a div or td.
<td align="center" style="background-image: url('http://url.of/image.png');"></td>The background-image also calls a URL from inside, and points it to your background image. Similar to the background attribute, the background-image also has the same issues of repeating the image, or not allowing you to resize or reposition it.
To restrict the image from repeating, adding a background-repeat to the code is the solution.
<td align="center" style="background-image: url('http://url.of/image.png'); background-repeat: no-repeat;"></td>Other than no-repeat, the background-repeat can take a few different values, but they are used according to requirements. The no-repeat restricts the image from repeating in both X and Y axes.
You can also reposition the image by adding a background-position attribute with a required position value.
<td align="center" style="background-image: url('http://url.of/image.png'); background-repeat: no-repeat; background-position: bottom right;"></td>Other than all these, the most useful background property is the background-size. You can use this property to assign a particular size to the image, in case it should be opened in mobile, where the space is too limited. To restrict the devices from auto-shrinking the background image, you can assign a cover or contain value as background-size, and display the image more gracefully.
Just like the bgcolor property in HTML, you can use the background-color property in Inline CSS for defining a background color to display in case the image fails, gets scaled at any portion.
<td align="center" style="background-image: url('http://url.of/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: gold;"></td>
-
Using Embedded CSS
If you really don’t think of playing through the codes, you can embed all the background image properties inside a CSS class, and call the class from the code.
<td class="bgImage"></td>Open a stylesheet in your email’s head with a style tag. Now, add your CSS by referencing the HTML element on which you’re including the background image.
<style> .bgImage { background-image: url('http://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; } </style>
If those who view the email has an embedded CSS support, they can view the background image inlined on the element directly. This also makes the HTML easier to read and update.
-
Using Bulletproof Backgrounds
The bulletproof backgrounds is designed and publicized by Stig Morten Myre from Campaign Monitor. This is a popular and effective method for including background images in an email.
The Bulletproof backgrounds use Microsoft Vector Markup Language (VML) along with the attribute method mentioned above, for displaying background images. That helps to display the images anywhere and everywhere. If you use the v:fill tag in VML, you can display the images in emails which Microsoft Outlook suite of email clients can render. You can then fallback to the background attribute in case of non-Outlook email clients.
<table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td background="http://path.to/image.png" bgcolor="#7bceeb" valign="top"> <!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;"> <v:fill type="tile" src="http://path.to/image.png" color="#7bceeb" /> <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0"> <![endif]--> <div> </div> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> </td> </tr> </table>
Though VML has gained success over the past years, it was lesser in limelight due to inaccessible documentation and of course, a lot of codes! This had made the VML coding difficult to understand and maintain. That’s where Stig has made an easy tool for creating bulletproof background images.
Background Image Support in Email Clients
Background Image Support in Mobile Clients
Background Image Support in Webmail Clients
To Conclude
When generic emails can be monotonous, it’s quite evident that we will wish for colourful and image-based email templates which easily attract the viewers. Understanding the restrictions offered by several email clients, adding background images were always a tough job. Hope this article left you with a sigh of relief!
Using the WooCommerce Email Customizer plugin from ThemeHigh allows store owners to customize transactional emails using a visual template editor. Display your emails in different styles and layouts, with images, GIF, buttons, social media icons and much more.
