Free Friday: Blue Cloud Email Template with Background Image for Outlook

Free Friday: Blue Cloud Email Template with Background Image for Outlook

With the arrival of winter we’ve design this pretty bright blue email template to remind us how much we’ve already missed summer. With hazy blue clouds and utility poles that give off that hot summer day feel to it, we can only wish that summer isn’t too far away.
blue cloud email template
We’ve included a bonus here; this email template has a background image that is displaying for Outlook 2007 & 2010. Here’s an old post on how to add background image in Outlook. I will go into details on how we’ve accomplished this for this specific template.

How to Display Background Image in Table Cell

Include the following code into the <html> tag of your document:



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

For this specific template design, we’re going to want to show the logo over the background image in a table cell — unlike our previous post where we wanted the image to show in the background of the body, we’ll want to show the background only in a certain cell. This method create another problem in Outlook; Outlook will add an unwanted 5 pixel spacing underneath this table cell. To solve this little bug, we’ll have to specify a height and width using the code below. You must remember to specify the width and the height for both the <v:image> and <v:shape>.

<td background="images/image_9119314.gif" style="background-image::url('images/image_9119314.gif');">
	<!--[if gte mso 9]>
	<v:image xmlns_v="urn:schemas-microsoft-com:vml" id="theImage" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:109px; width:600px;top:0;left:0;border:0;z-index:1;' src="images/image_9119314.gif"/>
	<v:shape xmlns_v="urn:schemas-microsoft-com:vml" id="theText" style='behavior: url(#default#VML); display:inline-block;position:absolute; height:109px; width:600px;top:-5;left:-10;border:0;z-index:2;'>
	<!--[if gte mso 9]>

For this specific email template, the logo (or text) that we want to display over the background image would be contained within the table (or paragraph tags) that is wrapped around using the <v:image> and <v:shape> tags. So remember, the only thing that needs to change in the above code is your height and your width.

Never miss an update