LC1
Full-Email Bulletproof Background Image Breaks Tables
We're trying to create a design in which the background image sits behind the entire email.
Unfortunately, on Outlook 2007, 2010 & 2013 it breaks the containing tables. Has anyone been able to acheieve such a thing? If you put this code into the inbox checker, you'll see what I mean by broken!!
Example:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass *, .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
body, table, td, a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table, td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
background-color: #ffffff;
margin: 0;
padding: 0;
min-width: 100%;
width: 100% !important;
}
.appleBody a {
color: #000000;
text-decoration: none;
}
.img-full {
border: 0;
}
@media screen and (max-width: 600px) {
div, p, a, li, td {
-webkit-text-size-adjust: none !important;
}
table[class="responsive-table"] {
width: 100% !important;
height: auto !important;
min-width: 100% !important;
}
td[class="responsive-table"] {
width: 100% !important;
}
table[class="hide-table"] {
display: none !important;
}
td[class="hide-table"] {
display: none !important;
}
*[class="mob-hide"] {
display: none !important;
}
td[class="pad-top"] {
padding-top: 15px !important;
}
td[class="spacer-cell"] {
height: 15px !important;
}
.img-full {
width: 100% !important;
}
td[class="no-pad"] {
padding: 0px !important;
}
td[class="center"] {
text-align: center !important;
}
td[class="mob-padding"] {
padding-top: 5px !important;
padding-bottom: 5px !important;
text-align: center !important;
}
td[class="pad-top-left"] {
padding-top: 5px !important;
text-align: left !important;
}
td[class="pad-top-border"] {
padding-top: 15px !important;
border-top: 1px dashed #cccccc;
}
td[class="pad-bottom"] {
padding-bottom: 15px !important;
}
.divider {
border-bottom: 1px dashed #cccccc !important;
}
}
</style>
<style type="text/css">
/* WINDOWS PHONE 8 FIX */
@media only screen and (max-width:480px) {
@-ms-viewport {
width:320px;
}
@viewport {
width:320px;
}
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="#f1f1f1">
<tbody>
<tr>
<td height="100%" bgcolor="#f1f1f1" style="padding:0px 15px;" valign="top" align="center"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="responsive-table" style="table-layout:fixed; width: 600px; max-width: 600px !important; min-width: 600px;" bgcolor="#ffffff">
<tbody>
<tr>
<td background="https://www.communigatormail.co.uk/login/Instances/supporttestinglz/images/_GatorTraining/prisym_lt_grey_crop.png" bgcolor="#ffffff" width="600" valign="top" style="background-size: 100%; background-repeat:no-repeat;"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height"840px;">
<v:fill type="frame" src="https://www.communigatormail.co.uk/login/Instances/supporttestinglz/images/_GatorTraining/prisym_lt_grey_crop.png" color="#ffffff" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:20px; font-family:arial; color:#888888; font-size:11px; text-align:center;" bgcolor="#f1f1f1"><a style="color:#888888;" href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14286">View online</a> | <a style="color:#888888;" href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14287">Forward to a friend</a></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:15px;" bgcolor="#ffffff"><table width="200" border="0" align="right" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td><img src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/logo.gif" alt="Logo" width="200" height="80"></td>
</tr>
</tbody>
</table>
<table width="300" border="0" align="left" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="font-family:arial; color: #488bc8; font-size:18px; line-height:20px; padding-bottom:6px;" class="pad-top">Enter your headline here...</td>
</tr>
<tr>
<td style="font-family:arial; color:#333333; font-size:12px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua consectetur adipiscing eli qui blandit praesent luptatum zzril</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table bgcolor="#658d3c" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px 15px;"><table width="200" border="0" align="left" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="font-family:arial; color:#ffffff; font-size:14px;">Issue 7: March 2016</td>
</tr>
</tbody>
</table>
<table width="200" border="0" align="right" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td align="right" style="font-family:arial; color:#ffffff; font-size:14px;" class="pad-top-left"><a href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14288" style="color:#ffffff; text-decoration:underline;"><span style="color:#ffffff;">www.companyname.co.uk</span></a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="font-family:arial; color:#333333; font-size:12px;"><span style="font-size:22px; color:#658d3c;">Lorem ipsum dolor sit amet</span><br>
<br>
<strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</strong><br>
<br>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.<br>
<br>
<table bgcolor="#488bc8" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:7px 12px; font-family:arial; color:#ffffff; font-size:14px;"><a href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14289" style="color: #ffffff; text-decoration:none;">Find out more</a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr> </tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<!--Start Divider-->
<table class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="1"></td>
</tr>
<tr>
<td height="1" style="border-top:1px dashed #cccccc;"></td>
</tr>
</tbody>
</table>
<!--End Divider-->
<table class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:15px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="270" border="0" align="left" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="font-family:arial; color:#333333; font-size:18px; padding-bottom:8px;color: #658d3c;" align="left">Enter your title here...</td>
</tr>
<tr>
<td style="padding-bottom: 10px; font-size:12px;" align="left"><font color="#333333" face="arial">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></td>
</tr>
<tr>
<td align="left"><table bgcolor="#488bc8" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:7px 12px; font-family:arial; color:#ffffff; font-size:14px;"><a href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14290" style="color: #ffffff; text-decoration:none;">Find out more</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="270" border="0" align="right" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td class="pad-top"><img src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/270150.gif" class="img-full" alt="" style="max-width: 100%;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="15" style="border-bottom:1px dashed #cccccc;"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="270" border="0" align="left" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="font-family:arial; color:#333333; font-size:18px; padding-bottom:8px;color: #658d3c;" align="left">Enter your title here...</td>
</tr>
<tr>
<td style="padding-bottom: 10px; font-size:12px;" align="left"><font color="#333333" face="arial">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></td>
</tr>
<tr>
<td align="left"><table bgcolor="#488bc8" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:7px 12px; font-family:arial; color:#ffffff; font-size:14px;"><a href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14291" style="color: #ffffff; text-decoration:none;">Find out more</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="270" border="0" align="right" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td class="pad-top"><img src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/270150.gif" class="img-full" alt="" style="max-width: 100%;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="15" style="border-bottom:1px dashed #cccccc;"></td>
</tr>
<tr>
<td height="15"></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="270" border="0" align="left" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="font-family:arial; color:#333333; font-size:18px; padding-bottom:8px;color: #658d3c;" align="left">Enter your title here...</td>
</tr>
<tr>
<td style="padding-bottom: 10px; font-size:12px;" align="left"><font color="#333333" face="arial">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</font></td>
</tr>
<tr>
<td align="left"><table bgcolor="#488bc8" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:7px 12px; font-family:arial; color:#ffffff; font-size:14px;"><a href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14292" style="color: #ffffff; text-decoration:none;">Find out more</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="270" border="0" align="right" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td class="pad-top"><img src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/270150.gif" class="img-full" alt="" style="max-width: 100%;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table bgcolor="#658d3c" class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding:10px; font-family:arial; color:#ffffff; font-size:11px;" align="center"><table border="0" align="center" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="padding:5px;" align="center"><table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img width="26" height="26" style="border:none;" alt="Twitter" src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/Soc_Twitter.png"></td>
<td width="10"> </td>
<td><img width="26" height="26" style="border:none;" alt="Facebook" src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/Soc_Logo_Facebook.png"></td>
<td width="10"> </td>
<td><img width="26" height="26" style="border:none;" alt="Linked In" src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/Soc_Logo_Linkedin.png"></td>
<td width="10"> </td>
<td><img width="26" height="26" style="border:none;" alt="Google+" src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/Soc_Logo_GooglePlus.png"></td>
<td width="10"> </td>
<td><img width="26" height="26" alt="Pinterest" src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/Soc_Logo_Pinterest.png" style="border:none;"></td>
<td width="10"> </td>
<td><img width="26" height="26" alt="Instagram" src="https://www.communigator.co.uk/login/Instances/supporttestinglz/images/BGImageTest/Soc_Logo_Instagram.png" style="border:none;"></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="padding:15px;"><table width="270" border="0" align="left" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td style="font-family:arial; color:#333333; font-size:11px;"><strong>Company name here</strong><br>
T: 01234 567890<br>
E:<a href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14293" style="color:#333333; text-decoration:underline;"><font color="#333333"> info@companyname.com</font></a><br>
Registered in England <span class="appleBody">No.1234567</span></td>
</tr>
</tbody>
</table>
<table width="270" border="0" align="right" cellpadding="0" cellspacing="0" class="responsive-table">
<tbody>
<tr>
<td align="right" class="pad-top-left" style="font-family:arial; color:#333333; font-size:11px;"><span class="appleBody">Registered Office: The Office,<br>
1 The High Street,<br>
YourTown, YourCounty<br>
YourPostcode</span></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table class="responsive-table" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f1f1f1">
<tbody>
<tr>
<td style="padding:15px; font-family:arial; color:#888888; font-size:11px; text-align:center;">To opt out of future communications <a style="color:#888888;" href="{Content/CampaignURL}/lz.aspx?p1={Content/EMailLink}&w=14294">click here</a></td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
https://backgrounds.cm/
I have used this tool for creating bulletproof backgrouds for whole emails and within table cells.
Todd
Hey Todd - I've been under the impression that Outlook has extremely poor support for background images in general. Has this changed recently?
We have tried many different options and nothing works in Outlook. Even tried https://backgrounds.cm/ and it did not work - Outlook ignored the image. So we had to just do different layouts instead since our customers are mostly in Outlook. Very frustrating.
That mirrors what I've seen, too. I didn't THINK I'd missed some news where Outlook supported bg images but was sort of hoping that I had :-)
Hi there!
The Outlook conditional statement needs to have the exact height of the <div> or it will truncate the content at that height. In your case it appears that you should change height="840px" to height="1158px". Try the following to make it stable:
Let me know if you have any questions! You are super close!
Heidi @ eROI
You beat me to it! I would have had said the same thing, we had done a full image background for one of our campaigns a few months back, it got annoying since the client started changing the copy alot..
Thank you so much for your help!
We still have a problem when viewing on Outlook 2013, it seems to have removed the padding from the left hand side of the email.
Any thoughts!?
https://litmus.com/builder/9fc8733
Hi Lee,
Even though https://www.campaignmonitor.com/css/ says that Outlook 2007/10/13 doesn't support padding in div, a, and p tags, I also believe it doesn't fully support them in
<td>tags either On testing, it appears to support top/bottom padding but not left/right. To fix this, I believe you can make the following changes<td>container.600 - orignial_padding, where original_padding was the number of pixels.align="center"to the containing table.So for example,
would become
By taking the 15px of left and right padding out of the cell, the content in all clients are at the edge of the table, like it is in 07/10/13. Then changing the table's width from 100% (600px) to 570 and aligning that in the center, it has the same effect as padding, except this will (should) be supported in all clients. I tested a couple tables and it seemed to work across clients, so try it out and let us know how it goes!
Good luck!
m@ @eROI
I haven't dug into the code, but Outlook 2007+ does support left and right padding on
<td>tags — we use it all the time. In combinations with certain things it can cause rendering issues that are usually fixed with an extra nested table, but it's definitely supported.