Home | Email Marketing | How to use VML Background Images

How to use VML Background Images

Many marketers like to use background images in their emails – they can give your email a distinctive style, and are a great way to create an email design that closely aligns with your company website. However, for all the potential benefits, background images are often avoided because Outlook does not support background images in the same way as other mail clients.

Thankfully, you can use Vector Markup Language (VML) to add background images to your email templates so that they will display correctly in Outlook, alongside code that will allow the background image to display correctly in other mail clients as well!

If you are going to use VML in your emails, the first thing you must do is include the following namespace declaration in your opening <html> tag:

<html xmlns:v=”urn:schemas-microsoft-com:vml”>

Note: Because the opening HTML tag is outside an email template’s <body>, VML can only be used in email templates built in (or converted to) ClickDimensions’ free style and custom HTML editors. The ClickDimensions drag and drop and block editors restrict access to the source code so you are prevented from modifying the opening <html> tag as shown above.

Now you’re ready to add your VML background image!

To add a full-template background image that will render consistently in Outlook and other mail clients, add this code directly after your opening <body> tag:

Add the rest of your email’s content here, and then add the following code directly before your closing </body> tag:

The code above creates a <div> to contain the VML background image, which in turn contains a table that is set with the same background image using the standard HTML table background property. Outlook will ignore the table’s background image and render the <div>’s VML background image, while other mail clients like Gmail and Yahoo will ignore the VML and render the table’s background image. Additionally, the table has its height and width set to 100% so that it will expand to fill the entire <div>. Altogether, this combination allows your email template to render consistently across major mail clients.

It is also worth noting that in the example above, the VML background image’s fill type is set to “tile” – this works great with a seamlessly repeating background image. However, you can use any of the other fill types as appropriate for your needs: solid, gradient, gradientradial, pattern or frame. You can find additional details about VML background image fill types here.

I used a seamless repeating notebook paper background image in the example code, which you will want to replace with your own image by swapping out both occurrences of the example image source URL (https://app.clickdimensions.com/blob/clickdimensionscom-auyka/files/notebook_paper_background-light_blue_gray.jpg) with your own image source URLs.

Here is what a simple email template with the above code looks like in Outlook and Gmail.

Outlook:

outlook vml background

Gmail:

gmail vml background

Notice that our <div> and <table> are successfully expanding to fit each mail client’s interpretation of where the edges of the template are; Outlook is filling the entire window, while Gmail is stricter and reduces it to fit the space allotted by their web interface.

And that’s it! You’re now ready to start designing emails using background images, with confidence that the image will render consistently across major mail clients.

Happy Marketing!

Please note that ClickDimensions cannot assist with custom code requests.

About the Author:

mm
Weston Packard is the Lead Product Specialist at ClickDimensions.

Leave A Comment