CO
0
Background Image Does Not Stretch Fully in Outlook 2013 and Windows Mail
Hey guys.
I'm having this extremely odd problem with creating bulletproof background images, and this thing is driving me nuts.
Issue:
There are two variable content blocks and they include code that makes a background image appear on Outlook 2013 and Windows 10 Mail.
While the background images do show, the v:rect created seems to refuse to take up the 800 px width it's supposed to. See attached for a demonstration of how it looks in Microsoft Outlook 2013.
It shows fine in Outlook 2010.
Code for the first block (which is pretty much suffering the same issue as the 2nd) for brevity:
<!-- // Begin Module: Welcome Block \\ -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="wrapper_table" mc:repeatable="layout" mc:variant="Welcome Block" >
<tbody>
<tr>
<td bgcolor="#3b3f40" style="background:rgb(59,63,64) url('https://gallery.mailchimp.com/0728d953751ef38036e722a85/images/0ecfdaa9-07ef-4f83-8e45-ef4ed827bcb0.jpg'); background-repeat:no-repeat; background-position: center top 100% 100%; background-size: 100% 100%; width:800px; max-width:800px;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:800px; height:340px; mso-position-horizontal:center;">
<v:fill type="frame" src="https://gallery.mailchimp.com/0728d953751ef38036e722a85/images/0ecfdaa9-07ef-4f83-8e45-ef4ed827bcb0.jpg" color="#3b3f40" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]--><div>
<table cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td class="content" style="width:800px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td class="padding" style="width:20px;">
</td>
<td class="content_row" align="center" style="width:760px;">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" class="mobile_centered_table">
<tbody>
<tr>
<td class="section_h" height="90">
</td>
</tr>
<tr>
<td class="content_row" valign="top" align="center" style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:36px;font-weight:700;line-height:36px;text-transform:uppercase;width:760px;">
<span class="white_text" mc:edit="welcome_header"> WELCOME TO ULTIMAIL </span>
</td>
</tr>
<tr>
<td height="15" class="space_class" style="font-size:1px;line-height:1px;">
</td>
</tr>
<tr>
<td class="white_text" align="center" style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:16px;font-weight:400;line-height:24px;width:760px;" mc:hideable mc:edit="welcome_subheader">
Curabitur et ligula. Ut molestie a, ultricies porta urn vestibulum commodo
</td>
</tr>
<tr>
<td height="30" colspan="3">
</td>
</tr>
<tr>
<td valign="middle" align="center">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td bgcolor="#0d793d" class="button blue_button" align="center" width="160" height="45" style="border-radius:100px;display:block;background-color:#0d793d;border-color:rgb(57,57,57);border-width:0px;" mc:hideable mc:edit="a9">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="color:#ffffff;font-family:Montserrat, Arial, sans-serif;font-size:14px;font-weight:400;text-align:center;text-transform:uppercase;" align="center">
<a class="white_text" href="#" target="_blank" style="color:#ffffff;display:block;line-height:45px;text-decoration:none;width:100%;">
read more
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="padding" style="width:20px;">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td height="45" class="nomobile">
</td>
</tr>
</tbody>
</table></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<!-- // End Module: Welcome Block \\ -->
See it malfunction in Outlook 2013:
See it malfunction in Windows Mail 10:
Hi,
At the end where you have:
<!--[if gte mso 9]>/v:textbox
/v:rect
<![endif]-->
Try changing to:
<!--[if gte mso 9]></v:textbox>
</v:rect>
<![endif]-->
Or is the issue with win 10 Mail not loading the images?
Hello, it's both! Windows 10 Mail isn't loading the images at all, and Outlook 2013 is not loading them with their full width. Outlook 2010 is rendering them correctly, though. I am yet to test on Outlook 2016 and Outlook 360.
As for your suggestion, I'm not sure I understand. The code snippets in your comment look identical save for missing < > symbols in the first snippet. However my code already does look just like what you put in the second snippet. Or am I missing something? I might not be seeing the subtle change you suggest
For displaying the background image in its full width please :
Add the below code to the HTML tag :
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
as :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word">
Add the below code inside the head tag :
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:Allowjpg/>
<o:PixelsPerInch>96/o:PixelsPerInch
/o:OfficeDocumentSettings
</xml><![endif]-->
Thanks
Can I ask for a point of clarification and offer a possible insight?
Is the Outlook 2013 displaying at 120DPI. There is a known issue of scaling when emails are shown in the higher DPI versions of Outlook.
If that is the cause there are a few articles that go into how this is fixed. See the following
https://blog.jmwhite.co.uk/2014/03/28/solving-dpi-scaling-issues-with-html-email-in-outlook/
This might not fix the issue in Windows Mail 10. But if it helps maybe you can get pointers on that from other users.
Good luck
Hi,
first of all, if you want the block to be exactly 325px long, there's no point in using a textbox. The fit-shape-to-text part might only screw things up in the end.
As for the width: use html width instead of css width. Also add width to your container tables.
Finally Windows Mail 10: Have you tried this? https://litmus.com/community/discussions/6229-windows-10-mail-vml-background-solution
Hi Crystal,
I had a look at your code and i don't see an issue with the 800px wide VML. I was looking at the second image (email with images turned off) i checked the size of the white box around Welcome to Ultimail and i see it at 800px.
I would suggest looking for a rogue table column (or even ghost column) towards the end of the email that might be causing the extra column. If you post the complete code for the email then someone can help you fix it quickly.
Cheers