SV
0
VML Image Problem in Outlook '10
Having a weird issue with the vml hack when using background images. Could be a client issue, I've tested it around the office and it's only mine that does it, but it's such a weird effect...
When I look at the email in outlook10 preview(images downloaded), I get 'the linked image cannot be displayed. The file may have...' message, but this only 'covers' about 3/4 of the image, some of the image is displayed at the bottom.
If I then do anything to the email within the preview window (click on it right or left, resize the window) the rest of the image is revealed.
I've basically stripped the code of everything I can think of that could cause the issue (see below) and it
still occurs.
Client issue or am I missing something?
<table align="center" width="700" height="1050" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="http://placehold.it/700x1050.jpg">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml"; target="_blank"; id="placehold" style='display:inline-block;position:absolute; height:1050; width:700px;top:0;left:0;border:0;z-index:1;' src="http://placehold.it/700x1050.jpg"/>
<![endif]-->
</td>
</tr>
</table>
Hi Sam!
Try using this background image generator from Campaign Monitor to resolve your code. The single table cell option will be your best bet since you don't need it to tile.
Let me know if you have any issues, I've had really good luck with this snippet and use it often :)
Heidi @ eROI
Hi Heidi,
Thanks for your help, I encounter exactly the same issue with this code as well.
What's really weird is that sometimes it just doesn't happen. Then I'll reopen Outlook and the problem reoccurs...
Do you have access to a PC with the Outlook application available? I actually keep an old PC laptop in my drawer so when I see variations in my testing I have the ability to send myself a live test. If the test works as intended, I usually feel pretty good moving forward. I chalk it up to the screenshot being taken before the email was done rendering in Litmus.
Also! I found that sometimes if the background image is taller than approx. 1500px it will truncate the content. If this is the case, I would break up the background images into two slices, hopefully at a natural break like a row or table.