Extravision Blogsblog

Recent Posts

Categories

Posts

Help with background images in emails

July 21, 2011

With the introduction of Outlook 2007 some years ago, most designers stopped using background images as Outlook 2007 didn’t support them using the conventional method.  Using the code below is a way of making sure your background images are viewed in almost 90% of email clients.

Place this within the head of the html email:

<style>
  v:* { behavior: url(#default#VML); display: inline-block; }
</style>

In the example below we have show the code to use as if you were adding a background to a cell in a table:

<tr>
   <td  style="background-repeat:no-repeat" background="http://www.anyurl.com/images/anyimage.jpg" ><!--[if gte vml 1]>
<v:image style='width: 317px; height: 59px; position: absolute; top: 0; left: 0; border: 0; z-index: -1;'    src="http://www.anyurl.com/images/anyimage.jpg" />
  <![endif]-->
  </td>
</tr>

From the example code above all you need to do is edit the image url to the url of the image you want to use and edit the width and height within the v tag according to your background image. It’s as easy as that.

Email clients that supports background images:

Outlook 2000
Outlook 2002/XP
Outlook 2003
Outlook 2007
Outlook 2010
Lotus Notes 8
Lotus Notes 8.5
Hotmail
AOL Mail
Yahoo! Mail
Gmail
Me.com
iPhone
iPad
BlackBerry
Lotus Notes 6.5     X
Lotus Notes 7        X

Posted by Joel Jarman
Tip of the month


No comments

Comments are closed.

From the Blog

Line height issues in Outlook

Line height is not always consistent when viewing emails in Outlook. This is especially true…

Andrew Chau
March 1, 2017

Are you making the most of your ESP?

If you use an Email Service Provider, you now get some pretty powerful technology alongside…

Jenni Malley
February 10, 2017

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog