Windows 10 Mail - VML Background - Solution
Hey all!
So as we all know, background images in Outlook were always kind of wonky; but research and testing prevailed and we figured out a way to make them work. Windows 10 mail comes along and decides to throw a new wrench into the system and not properly support some aspects of VML. The good news is, there's a workaround! I spent a bit of time researching this, testing and retesting, but we finally have a nice VML background snippet that works across both Outlook (2000-2016) as well as Windows 10 mail.
<table class="" width="640" cellpadding="0" cellspacing="0" border="0" style="width:640px">
<tr>
<td class="" valign="top" height="300" background="http://media.lt02.net/1/Users/28501/Emmet/background.jpg" style="height:300px; background-image:url('http://media.lt02.net/1/Users/28501/Emmet/background.jpg'); background-repeat:no-repeat; background-position:center;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" id="theImage" style="behavior: url(#default#VML); display: inline-block; position: absolute; width: 640px; height: 300px; top: 0; left: 0; border: 0; z-index: 1;" src="http://media.lt02.net/1/Users/28501/Emmet/background.jpg" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block; position: absolute; width: 640px; height: 300px; top: 0; left: 0; border: 0; z-index: 2;">
<v:fill opacity="0%" style="z-index: 1;"/>
<div>
<![endif]-->
<!-- Containing Table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="" align="center" valign="middle" height="300" style="height:300px">
<!-- Contents -->
<!-- Headline -->
<table width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="" style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#fff; text-align:center; font-weight:bold; padding:30px 0; text-transform:uppercase;">And So My Watch Begins</td>
</tr>
</table>
<!-- Headline END -->
<!-- Button - CTA -->
<table class="" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="" height="50" align="center" bgcolor="#1a171b" style="font-family:Arial, Helvetica, sans-serif; font-size:14px;height:50px"><a href="#" title="JOIN THE WATCH" target="_blank" class="" style="color:#ffffff; text-decoration:none; display:inline-block; white-space:nowrap; padding:15px; background-color: #1a171b; border:1px solid #1a171b; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"><strong style="font-weight:normal">JOIN THE WATCH</strong></a>
</td>
</tr>
</table>
<!-- Button - CTA -->
<!-- Contents END -->
</td>
</tr>
</table>
<!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
</td>
</tr>
</table>
Really the only difference between this and the standard VML Background Image is that instead of a <v:shape> we're utilizing <v:rect> and filling that with a <v:fill> with 0 opacity. VML like this has been used for repeating background images, but it also works here. It's actually quite simple when it boils down to it.
Here's a litmus test of it working: https://litmus.com/pub/ddedfcf
There is alternative method at the base of this blog.... Don't take the code from the email build..., scroll to the bottom of the blog and look at that...
Similar to this method, but far less code, works well in DPI too.
https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16
This is great, any luck figuring this out for full width backgrounds?
Gonna have to give this a spin for Pine. Did you happen to test whether
<div>spacers like this one work? I find the traditional VML background image technique ignores them, so was thinking maybe it has to do with the<v:shape>.Cosmin,
I didn't actually test that for the this particular one, no; but it's certainly something to look into!
Right. So, I managed to reduce the code used by more than half - looks like we can do without many of the attributes and CSS props.
Feel free to test this code: https://codeshare.io/alo8bD
(note: using my own framework here, for resets & everything; scroll down to see the hero module with the VML bg image)
In this example, I've intentionally used a higher image as the src for the VML
v:imageelement, to show that it doesn't matter: it gets cropped to the size of thev:rectthat you specify. I've tested that the same goes for the width: using a wider image for the VML src didn't blow up the email in my tests. So if you accidentally used a bigger image, you're not taxed like with the old VML technique that was usingv:shape.Another benefit is that this doesn't force you to set the height on the parent cell.
Hi Cosmin. I tested your code. It works great in Win 10. But in Outlook 2013 I'm getting a " The linked image cannot be displayed error" . Strangely, when you click on it, the image reveals itself. Have you seen this?
Is this a Litmus result, or is it in the actual 2013 application?
Hey Joshua,
Nope, it displays right away in my case (both when testing and in the actual email client). There might be some caching involved, not sure about that.
@ Josh Blauvelt
This was occurring on my local Outlook 2013. I ended wrangling VML all day and eventually got a working solution. Different from the code here. I placed my image in the Outlook conditional.
What's the proper way to post a code block here on Litmus?
Thanks for cleaning it up! I had to make a few changes to the code so I could throw my column modules into it easily, but I didn't have to tweak any of VML.
However, for anyone trying to pull this into their base template or framework, be aware that I needed to add this
xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"to myhtmltag, before it would work for me.You only need the first attribute, with the VML stuff. The second one, I use in conjunction with that OfficeDocumentSettings tag, in order to keep things predictable in Outlook @ 120 DPI; it's not needed for VML to work.
It was actually the
<div>I was missing inside the conditional, like you have it, that prevented spacer divs like the one I mentioned from working.I've been toying with your code and I think I managed to trim it down a bit. I particularly don't like the fact that I would need to set a fixed height on the cell. Be right back with results.
this works perfect thank you so much for taking the time to look into this!
This is awesome! Thanks for sharing your findings, works great!!
Thank you. Working fine
I'm getting it to work in Windows 10, but in Outlook 2013 the bg image doesn't load automatically. " The linked image cannot be displayed" error. But if you click it, then it reveals the image. Anyone else seen this?
Is this on a Litmus result, or are you using Outlook 2013? It could be an images setting. I haven't seen the problem in Litmus results, and I use Outlook 2010 and 2016. :/
Local Outlook 2013. On my desktop and Laptop. I've never adjusted any setting whatsoever in Outlook.
Hey There - I am having problems with getting the text to overlay on the background image as it is showing up under the background image
Screenshot > https://www.screencast.com/t/nekTd2YDZ22x
Here is my code:
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" height="150"><tr>
<td bgcolor="#665f95" background="http://visitgreenvillesc.dmplocal.com/dsc/collateral/Lets-Go-Grreenville-Masthead-600x150.png" style="background:url(http://visitgreenvillesc.dmplocal.com/dsc/collateral/Lets-Go-Grreenville-Masthead-600x150.png);background-image:url(http://visitgreenvillesc.dmplocal.com/dsc/collateral/Lets-Go-Grreenville-Masthead-600x150.png);" style="width: 600px; height: 150px;" class="background">
<!--[if gte mso 9]>
<img src="http://visitgreenvillesc.dmplocal.com/dsc/collateral/Lets-Go-Grreenville-Masthead-600x150.png" alt="" border="0" width="600" height="150" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:150px; position:absolute;top:0;left:0; border: 0; z-index: 2">
<v:fill color="#665f95" opacity="0%" style="z-index: 1;" />
<div>
<![endif]-->
<div>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" height="150" class="mobile-hide">
<tr>
<td valign="top" style="padding-top: 40px; padding-right: 20px; padding-bottom: 0px; padding-left: 60px;" valign="middle" align="left">
<table style="width: 110px;" cellspacing="0" cellpadding="0" border="0" class="responsive-table">
<tr>
<td style="font-family: 'PT Sans', Arial, sans-serif; font-size: 18px; color: #c1d82f; text-align: center; font-weight: 700;" align="middle">[edit:date1]</td>
</tr>
<tr>
<td style="font-family: 'PT Sans', Arial, sans-serif; font-size: 18px; color: #ffffff; text-align: center; font-weight: 700;" align="middle">[edit:year1]</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Containing Table END-->
<!--[if gte mso 9]>
</div></v:fill></v:rect><![endif]-->
</td>
</tr>
</table>
I know I am doing something terribly wrong.
Thanks so much!
VW
Hey! This is fantastic! Have you tested for a full background? Thanks! VW
Thanks for the code! Does this method work for Android? The preview images for Android 5 & 6 are missing the bg image. Sometimes it's just the image render....
If you're looking at Gmail on Android for a non-Gmail account, background images apparently are still not supported.
More on this, here: http://freshinbox.com/blog/gmail-android-doesnt-display-background-images-on-non-gmail-accounts/
For some reason, Litmus uses non-gmail accounts on for testing on Android 5.1 and 6.0. I set up four accounts for the gmail app on both an Android 5.1 and 6.0 phone: A gmail account, my own domain email hosted by gmail, and a non-gmail account (both a hotmail.com and outlook.com account). The background image does display on the gmail and domain hosted accounts, whereas the background image does not display on the non-gmail accounts.
It should also be noted that gmail/domain hosted accounts support media queries, while non-gmail accounts do not; I believe they stripe the
<style>definitions from the email.I was under the impression that background images didn't work on Android 5.1 and 6.0 ?
https://www.emailonacid.com/forum/viewthread/829/
I just tested bg images on Android 5.1, physical device, Android Mail Client with the orange UI, with a Gmail account. No backgrounds. Any ideas?
Taira,
Yes, it does indeed! This was tested on some devices we have laying around our office. One of them being an Android 5, and the other being an Android 6!
Thanks Marshall. I'm pretty excited about this. : )
Very nice, can't wait to try it out
How do I repeat the background image made of a pattern? <v:fill type="tile" does not work in <v:image type="tile"…
This is interesting work! Did you happen to do any testing with VML full width backgrounds?
This is fantastic! I've started using this VML code and it's working great! Thank you so much!