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.
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:
xmlns:v="urn:schemas-microsoft-com:vml"
Example:
<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;'>
<div>
<![endif]-->
<table>
INSERT OVERLAY TEXT OR IMAGE HERE
</table>
<!--[if gte mso 9]>
</div>
</v:shape>
<![endif]-->
</td>
...
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.
