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

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog