Background Image Issues (Only in Outlook) - on a deadline :(
Hi, I recently switched over our company's email design templates to responsive using Litmus' template as a guide. It's awesome! I've tried to implement background images and it's worked to the best of my knowledge on most email providers except ONE, Outlook. I purchased the software yesterday to make my life easier with testing and I still can't seem to solve the problem on how to implement backgrounds for Outlook. Everything I read says they're not supported but on some sites offering work arounds, I'm actually able to ahieve the image but with messed up table alignment.
After hours of trial and error with implementing all sorts of code for a "bulletproof background" I'm on a deadline and at my Whits End. I need to find a solution, as I would love to be able to achieve this effect moving forward with other email designs. I've tried placing the background image in a table cell verse the entire emails background and have had slightly better luck.
Please help. A link to my 'not so awesome' email: http://email.equinoxfunds.com/aspect/medium-term_feb-16-FIX.html
Hey Robyn.
I've had this same issue in the past and have come up with the below solution. It works about 99%. There are a couple of Outlook versions and one Gmail app version that fall back to the background color but otherwise it works fine.
This allows for mobile manipulation of the background image. It's to be placed up in the styles:
.mobile-background {
background-image:url('https://placekitten.com/500/300');/*Controls Repetition of Background*/
background-repeat:no-repeat;/*Controls Repetition of Background*/
background-size:cover;/*Controls size of Background*/
background-position:center;/*Controls Position of Background*/
background-color:#ff0000;/*Controls color of Background*/
}
This is for the body:
<table cellpadding="0" cellspacing="0" border="0" role="presentation" style="margin:0 auto; width:100%; max-width:640px;" align="center" bgcolor="#e8e4e7">
<tr>
<!--Change backgroud image and color with appropriate contrasting color-->
<td style="background-image:url(https://placekitten.com/500/300);background-color:#0000ff;">
<div>
<!--Change backgroud image and color with appropriate contrasting color in this conditional Outlook table-->
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="frame" src="https://placekitten.com/500/300" color="#ff0000" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation" class="mobile-background">
<tr>
<td style="font-size:40px; font-family: arial,helvetica,sans-serif; line-height:48px; color:#ffffff;text-align:center;padding:40px 25px;" class="webfont">YOUR TEXT GOES HERE</td>
</tr>
</table>
<!--[if gte mso 9]>
/v:textbox
/v:rect
<![endif]-->
</div>
</td>
</tr>
</table>
Obviously you can adjust and manipulate this to suite your needs but this works very well for me.
Hopefully this all makes sense and can help you with your deadline.
William - thank you so much!
As you know, CSS background images aren't supported. Unfortunately aside from the Bulletproof Background solution (https://backgrounds.cm/) using VML, there isn't any other way of making background images work in Outlook to my knowledge, if you're not able to use inline image(s) instead.
hi thanks for (https://backgrounds.cm/) and its working fine in outlook.
ITS WORKING OUTLOOK?
Yes, it works in Outlook! Wonder of wonders!
ah...so heres part of your issue. you cant do nested VML. like, for backgrounds, you cant do one background image inside another one. because of the way the VML has to be done, it creates a redundancy and the code breaks. i would try to combine your gradient and background in a way that can scale properly.
you can do gradients with pure VML as well to compensate for that 2nd image but theyre not always fun to figure out and can be a bit erratic.
Awesome, thank you Zach for this feedback! Much appreciated and makes perfect sense.
I've been dealing with the same issue, except I have to keep editable text over the background image (thus the image being in the background). After hours I've not been able to come to a solution. Would someone be able to take a look? http://images.notice.wageworks.com/Web/WageWorksInc/{dfb22f3c-20ad-43ba-a13a-d8202afa3530}_Open-Email-HTML-NEW-upload.html
Unfortunately the solution above gave me a completely blank email in Outlook.
What messaging platform are you using? We have to use a propriety system built in-house by our parent company and have to add PERL code to every Outlook Conditional in order for the system to render them. Without the PERL, we get the same result as you indicated above.
If that's definitely not the issue, then the bulletproof solutions mentioned above SHOULD work. I'm finishing up a campaign that uses background images and live text right now and the only Outlook issue we're running into is with the 120 DPI clients (which we can't really do anything about... even with the Outlook pixel data added in the head of the email).