When I include the following HTML in an email, the image is downloaded automatically by Outlook:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head></head><body><div><p><br /></p></div><div style="border-style:solid;border-width:2px;border-color:rgb(0,0,0);background-color:rgb(255,232,0);width:302px;height:185px"><img style="position:relative;z-index:100;left:126px; top:39px;" src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="image"/><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: -123px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>John</b></p><br /><br /><br /><br /><p style="opacity:1.00;color:rgb(0,0,0);position:relative;margin: 0px 0px 0px 18px;font-family: Helvetica, Helvetica;font-size:14px"><b>XYZ Company</b></p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div></body></html>
However, the same image in the following HTML is not automatically downloaded by Outlook:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
div, p {
margin:0;
padding:0;
font-family: Helvetica;
font-size:14px;
color:#000;
font-weight:bold;
}
div.box {
padding:15px;
width:272px;
height:155px;
border:2px solid #000;
background-color:rgb(255,232,0);
}
div.box div.inner {
height:100%;
background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat;
}
p.name {
margin-bottom:65px;
}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<p class="name">John</p>
<p>XYZ Company</p>
</div>
</div>
</body>
</html>
Why would the image be downloaded in the first example but not the second please?
That's because creating HTML emails suck. Outlook, since 2007 I believe, switched from using Internet Explorer's renderer to using a Word based HTML renderer. This makes CSS support extremely limited. Your best hope at making an HTML email without losing your mind is to use tables to structure your content and use inline styles right on the elements. Yes, to reach the widest possible audience with HTML emails you have to code like it's 1997.
Email clients do not provide full CSS support. These tables show what a nightmare it is... According to them, Outlook 2000-2003 did support background-image, but it was dropped in Outlook 2007 and 2010.
Outlook 2007 and 2010 do not support background images because your web browser in those apps is not IE. It's Microsoft Word. You have to use VML to set up background images (I know, I've had to do this).
Here's a page about the VML hack.
http://www.campaignmonitor.com/blog/post/3363/updated-applying-a-background-image-to-html-email/
You can also subscribe to a newsletter at MSNBC and see how it's done in their newsletter headers (my handiwork).