Free Friday: Winter Holiday Email Template & Background Image Fix for Outlook

We’re back from Thanksgiving with a Free Friday blog featuring two free email templates.

With Christmas just a few weeks away and winter is already here, we’re proud to release our first winter holiday-related template for 2011. Send your customer a thank you message or simply wish them a happy holiday with a free coupon gift illustration in this beautiful template drenched in deep winter blue featuring a cozy and warm snowman.

This orange and black template consist of a video screen capture and different orange hues to show that “pop”. There are very small details making this template a must-have with detailed patterns behind the logo with sharp colors and edges ready to impress your client.

The template also feature a repeated background image that works in all major email client including Gmail, Hotmail, Yahoo, Outlook 2007 and 2010. It’s not a pretty fix by any means but it gets the job done.

Start by including this code to the <html> tag of your document:

xmlns:v="urn:schemas-microsoft-com:vml"

Example:

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

To get a repeated background image to display in Outlook 2007 and 2010, simply include this piece of code right after the <body> tag:

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www/url/to/your/background/image/file/for/outlook.jpg" />
</v:background>
<![endif]-->

One issue here is that if you needed a background to repeat horizontally – as with this template – Outlook 2007 does not support the CSS background-repeat. Since we’re applying a background to the body of the email, we’ve created a seperate background image that has a big enough width and height so it shows fully in Outlook.

To have a repeated background image to show for all of the other email client, simply include this code into the body section of your template, perferablly after the <body> tag.

<style type="text/css" media="screen">
background-image:url('http://www/url/to/your/background/image/file.jpg');
background-repeat:repeat-x no-repeat;
background-position:top left;
background-color:#eeae00;
</style>

Here’s what the full code should look like:

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
...
</head>
<body>
<style type="text/css" media="screen">
background-image:url('http://www/url/to/your/background/image/file.jpg');
background-repeat:repeat-x no-repeat;
background-position:top left;
background-color:#eeae00;
</style>

<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www/url/to/your/background/image/file/for/outlook.jpg" />
</v:background>
<![endif]-->

</body>
</html>

Unfortunately during the time of this template release, we were unable to figure out a fix for the padding issues only seen in Outlook 2007 and 2010.

Regardless, we hope you enjoy these free email templates as much as we enjoy making them.

Do you know of a fix for the padding issue in Outlook or a better work around to displaying repeated background images in Outlook? Please share with our community and post your solution in the comment.

Enjoy this post?

Subscribe for future posts.