TD
3
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?
The other thing I've noticed is when using Windows 10 - converting pixels (px) to points (pt) solves it for a few issues, also making sure to set the height in the outlook conditional comment css styling. To convert from pixels to points - multiply by 0.75
e.g. 640px
640*0.75 = 480pt
This worked for me! I only changed the pixels to points within the conditional statement and made sure the last cell had padding below it to make sure it displays the full background. Thank you!
Are the rest of your images loading correctly? And can you specify 'renders incorrectly'? That might help towards a solution.
I often find that I have to do a non-retina background image to get scaling right in an MSO conditional.
Also bulletproof backgounds and bulletproof buttons don't stack well. Does anyone know how to sit one inside the other?
check this site
https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013
there is solution for the above problem
Your background image is 2000 x 764 and over 4MB. Background images don't scale well in Outlook and that file size might be getting blocked by your company email. I would try reducing your image to the actual width you are using, and get the file size down to under 200kb so it will load quickly.
In photoshop export "Save for web" and reduce the quality to get the size down or try https://tinypng.com/.
Its best practice to make image file sizes as small as possible especially if you have mobile views. I try to keep images under 100kb in all of our emails and try to keep Gifs under 1MB.
Look in your code, you have "mso-width-percent:1000;height:380px;". My guess is the 1000% is what's causing the incorrect rendering.
HTH
-AD
I am seeing similar issues with bulletproof backgrounds when using this with Outlook email clients. Only the fallback color is displayed instead of the actual background image. I am baffled as well as this was working before.
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?
<body> <center> Content</body> </center>