TD2
Bulletproof Background Problems in Outlook 2013
Hi,
I am using the bulletproof background code provided by cm (http://backgrounds.cm/) to generate background for emails. However even though I test it and it looks perfect on litmus I have issues with the image rendering correctly on Outlook 2013. In most cases the image isn't loading or if it is it renders incorrectly.
Below is the code I am using:
<table cellpadding="0" cellspacing="0" border="0" height="380" width="100%">
<tr>
<td background="http://info.mkto.visioncritical.com/rs/visioncritical/images/doltone-house-apac-summit-banner-2.jpg" bgcolor="#7bceeb" valign="middle"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:380px;">
<v:fill type="tile" src="http://info.mkto.visioncritical.com/rs/visioncritical/images/doltone-house-apac-summit-banner-2.jpg" bgcolor="#7bceeb"/>
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0">
<tbody>
<tr>
<td align="center" valign="middle"><br><table border="0" width="255" align="center">
<tbody>
<tr>
<td width="49" align="right" valign="middle"> <img src="http://info.mkto.visioncritical.com/rs/visioncritical/images/3-summit-dots-white.png" alt=""></td>
<td width="150" align="center" valign="middle"><span style="font-size: 17px; font-family: Helvetica, Arial, sans-serif, 'Lato'; color: #ffffff;">SAVE THE DATE<br>
</span></td>
<td width="42" align="left" valign="middle"><img src="http://info.mkto.visioncritical.com/rs/visioncritical/images/3-summit-dots-white.png" alt=""> </td>
</tr>
</tbody>
</table>
<p> <br>
<img style="font-family: Helvetica, Arial, sans-serif, 'Lato'; color: #ffffff; font-size: 17px;" src="http://info.mkto.visioncritical.com/rs/visioncritical/images/Summit_Logo_White-2015.png" border="0" alt="VISION CRITICAL SUMMIT 2015" width="300"><br>
<br>
<br>
<span style="font-size: 17px; font-family: Helvetica, Arial, sans-serif, 'Lato'; color: #ffffff; text-align: center;">July 23, 2015<br>
Sydney, Australia</span><br>
<br>
</p>
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 10px 25px 10px 25px; border-radius: 20px;" width="100%" bgcolor="#FF8100"><a style="font-size: 16px; font-family: Helvetica, Arial, sans-serif, 'Lato'; font-weight: normal; color: #ffffff; text-decoration: none;" title="Save the date" href="http://info.mkto.visioncritical.com/rs/visioncritical/images/Save%20the%20date%20Vision%20Critical%20Summit%202015.ics"><span class="appleLinks">Save Now →</span></a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
Is there something wrong that anyone can see that would stop the image from coming up?
Bec
Here's the code I've been using that seems to work really well when I'm only using one background in an email. If there are multiple background images for different sections I have some slightly different code for that. Hope this helps. It looks pretty similar to yours with a few differences in the styling.
<!--[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="https://santanderconsumerusa.box.com/shared/static/d4t3nvv60uhdirs1aztsq4rh1u4bolbo.png" color="#3b464e" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table></table>
<!--[if gte mso 9]>
/v:textbox
/v:rect
<![endif]-->
Hi, William.
Could you please show the code if there are multiple background images for different sections?
Are the rest of your images loading correctly? And can you specify 'renders incorrectly'? That might help towards a solution.
I have a feeling the CTA button overlaying it is causing this issue. Can you send a screen shot of what you're seeing in OL 2013?
I use the same code but for some reason the image or background color always ends up offsetting to the right. Any ideas why?