Cell background image behaviour in Outlook

Question

I'm having an issue with Outlook (surprise) and having a background image in a table cell. Now the problem is I can get it to work in 99% of Outlook versions except however, the desktop version of 2016 running on Windows 10.

Here is the code for the block:

<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top; width: 640px;" width="640">
<tr>
    <td class="w-full" background="http://via.placeholder.com/640x320" bgcolor="#7bceeb" width="640" valign="top">
            <!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:1280px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
            <div>
                <table align="" border="0" cellpadding="0" cellspacing="0" class="w-full" style="vertical-align:top;" width="640">
                    <tr>
                        <td valign="top">
                            <table border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
                                <tr>
                                    <td height="35" style="text-align: center;"> </td>
                                </tr>
                                <tr>
                                    <td align="center" style="color:#FFFFFF; font-size:24px;">
                                        <div style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #ffffff; text-transform: uppercase;"> <font face="'Century Gothic', Helvetica, Arial, sans-serif"><span style="font-size:44px;">Lorem Ipsum</span><br>
                                      <br>
                                      <span style="font-size:24px;">SOME TEXT HERE<br>
                                      with a page break here</span></font>
                                            <br>
                                            <br> &nbsp;</div>
                                        <table align="center" border="0" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td align="center" style=" font-family:'Century Gothic', Helvetica, Arial, sans-serif; font-size:14px; color:#ffffff; text-transform: uppercase; font-weight: bold;"> <a href="#" style="color:#ffffff; text-decoration:none; padding:14px 30px; display:inline-block; border:solid 1px #ffffff;" target="_blank">CTA Text</a></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="35"> </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
        </td>
</tr>
</table>

and that will produce this result: 2016 Desktop

However, it kills the other versions: All other versions

If I reduce the VML width from 1280px to what it SHOULD be (640px) it fixes all the other versions but, only gives me half an image in the desktop client (basically the polar opposite).

Now my understanding is that this desktop client is probably rendering at a higher DPI/resolution, hence why doubling the width gives me the correct result and the actual width gives me half a cell.

My question is, is there a work-a-round/hack that will allow me to display at double width in that client and have the others ignore this rule?

Any help would be appreciated as I can't find a shred of info anywhere, thanks in advance.

Answer 1

After a week of hunting, I came across this article that addresses the issue I was having:

Solving DPI scaling issues with HTML email in Outlook

It was very clear on why it breaks and how to counter it so I would highly recommend checking it out to fully understand the issue.

---

However, If you're in a rush and just want the code for a quick fix, you'll need to insert the following code in to the HTML tag of your template:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">

This tells Outlook what to expect You'll then need to insert this code into the HEAD section of your template just before the close:

<Head>
<!--[if gte mso 9]>
    <xml>
        <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
    </xml>
<![endif]-->
</Head>

and finally, as before (see original question), you'll need to tell the cell exactly what it needs to do with something similar to:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="http://via.placeholder.com/640x320" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">

Obviously, tweak as you need to for your own emails but, this worked for me. I hope this answer helps others as it helped me when it boils down to DPI scaling on newer machines with higher resolution monitors!

Full credit to "James" for this solution.