Email background image - css

I would like add background image to mail email. When i test on MailChimp, the preview is good (with inline style and minified).
But if i run test on my mail (Gmail APP and Outlook), i've no background. If i open the mail in browser, my background is show.
I've test with this :
background="http://domaine.com/myimage.jpg"
and
background: url('http://domaine.com/myimage.jpg') !important; // Inline style
No result. Anyone have idea ?


My code for backgrounds in emails after 1,5 years of blood, sweat and tears:
Important to know is that almost everything in this piece of code is important!. From the DOCTYPE, html tag's xml attributes, conditional comments and css in the head,... Just use this as a starting point for your next email.
Important tip:
Use the attr background="" on a td, not on a table or any other element.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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">
<head>
<!--[if (!mso)&(!ie)]>These<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>are<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>for<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>outlook<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>live<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>that<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>removes<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>the first<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>10 well-formed<!-- --><!--<![endif]-->
<!--[if (!mso)&(!ie)]>conditional comments<!-- --><!--<![endif]-->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta property="og:title" content="mytitle" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>mytitle</title>
<style type="text/css">
v\:* {
behavior: url(#default#VML);
display: inline-block
}
o\:* {
behavior: url(#default#VML);
display: inline-block
}
w\:* {
behavior: url(#default#VML);
display: inline-block
}
.ExternalClass{
width:100%;
}
table{
border-collapse:collapse;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
img{
-ms-interpolation-mode:bicubic;
}
.ReadMsgBody{
width:100%;
}
</style>
</head>
<body width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<table align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" bgcolor="#cccccc" bordercolor="#cccccc" style="margin:0; padding:0;">
<tr>
<td align="center" background="https://i.stack.imgur.com/LCCB6.jpg" bgcolor="#cccccc" width="100%" height="1000" valign="top" style="background-color:#cccccc;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent: 1000;height:1000px;">
<v:fill type="tile" src="https://i.stack.imgur.com/LCCB6.jpg" color="#cccccc" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<br /><br />
<div>
<!--[if (mso)|(ie)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" height="100%">
<tr>
<td align="center" valign="top" width="600" height="100%">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" height="100%">
<tr>
<td align="center" height="100%" bgcolor="white">
Content of your email goes here, for widths try to use % procent from now if possible. Start again here with a table
<br />
For outlook you need v:rect code and fixed height set in pixels!<br /><br />
If you just want a block inside this 600px wrapper with a background you do it like this:<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:100%;" height="300">
<tr>
<td align="center" height="300" background="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" bgcolor="#000000" style="color:#fefefe;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;">
<v:fill type="tile" src="http://1-background.com/images/nature/images/wood-background-repeating_1.jpg" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content goes here, for widths try to use % procent from now if possible. (except in v:rect code, use px there) For outlook you need v:rect code and fixed height set in pixels!<br><br>
v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:1000px;<br>
<br /><br /><br />
<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
<!--[if (mso)|(ie)]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>


CSS background does not work everywhere for email. Use the HTML background property instead. E.g:
<table background="image.jpg"...


Here is an example of the code that i have been using for quiet sometime now.
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="600">
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%; max-width:600px;">
<tr>
<td align="center" height="400" background="[IMAGE PATH]" bgcolor="#000000" style="height:400px;color:#fefefe; background-image: url('[IMAGE PATH]'); background: url('[IMAGE PATH]');">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:400px;">
<v:fill type="tile" src="[IMAGE PATH]" color="#000000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
Content here<br>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Above example is of a hybrid code. I have added two more background image paths in the style tag for the TD which should cater for Lotus notes (or older email clients) and for Gmail.
Let me know how you go.


Although the background images, we apply, may show at maximum no of email clients, but specifically not at the Outlook. So in order to show the email background at Outlook
You can use the Code snippet given below, which will make the bg image visible at Outlook.
Just select the Td at which you want the background image, then paste the below code there and update the background image path.
<td background="your_background_image_path_here">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block; width: 600px; height: 100%;"
src="your_background_image_path_here" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false"
style=" border: 0;display: inline-block;position: absolute; width: 600px;
height: 297px;">
<v:fill opacity="0%" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table>
Rest Your Emailer Code Goes Here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>

Related

VML image is not loaded in email when using relative url

I'm moving images from publicly hosted site to my Visual Studio project. After doing so, the VML images (<v:image />) are not loading anymore.. The image url is something like /images/my-image.png, which works as expected when using simple <img /> HTML element. The email structure is made like this, because the requirement is to show dynamic text over image.
I checked the email body using PapercutSMTP and the links are correct. I tried also to hard-code them, but no luck.
Note: I'm testing locally, but the same happens also on test environments. I'm focusing on Outlook, Gmail, IE.
My code:
<td class="emailnomob" align="center" valign="middle" background="<%=HeaderBackgroundImageUrl %>" bgcolor="#dddddd" style="background-image:url('<%=HeaderBackgroundImageUrl %>');background-size:100%;background-repeat:no-repeat; width:600px; height:300px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px; height:300px;" src="<%=HeaderBackgroundImageUrl %>" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position: absolute; width:600px; height: 300px;">
<v:fill opacity="0%" color="#f7901e" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table width="560" cellpadding="0" cellspacing="0" border="0" align="center" style="width:560px;">
// My text over image here
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
</v:image>
<![endif]-->
</td>

I fixed this issue by adding Content identifier (cid) inside :url () and src="" attributes.
<td class="emailnomob" align="center" valign="middle" background="<%=HeaderBackgroundImageUrl %>" bgcolor="#dddddd" style="background-image:url('cid:my-image.png');background-size:100%;background-repeat:no-repeat; width:600px; height:300px;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" style="width:600px; height:300px;" src="cid:my-image.png" />
...
</td>
It is quite old approach to embedd images inside an email.
More information about the implementation details here Stackoverflow post

Buttons text shift to left in Outlook when using VML

Im using VML in order to have background imgs in Outlook windows but when I use this code it causes my buttons to shift like 20px to the left in Outlook Windows.
Ive tried text-align and align centering everywhere with not much luck.
Removing the VML fixes issue but then removed bg img on Outlook.
Screenshot of issue:
Any input is appreciated.
Screencast of compared issue: https://screencast.com/t/7vAj6509FyH
<!DOCTYPE HTML>
<html lang="en">
<!-- Javelin v1.01 -->
<head>
<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">
<title>EVERY SEASON STARTS HERE</title>
<style type="text/css">
/* inject:css/mail.min.css */
a,body,span,table,td{-ms-text-size-adjust:100%}body,div[style*="margin: 16px 0;"]{margin:0!important}a,body,span,table,td{-webkit-text-size-adjust:100%}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;border:0;display:block;outline:0;text-decoration:none}.a6S,.mobileOnly,img.g-img+div{display:none!important}a:link,span.MsoHyperlink{mso-style-priority:100!important;color:inherit!important;color:inherit}a:visited{color:inherit!important;color:inherit}table{border:0;border-collapse:collapse!important;border-color:inherit}body{font-size:16px;padding:0!important;width:100%!important}.aBn,.unstyle-auto-detected-links *,[x-apple-data-detectors]{border-bottom:0!important;cursor:default!important;color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important}a:link,span.MsoHyperlink{color:inherit;text-decoration:none}a span,span.yshortcuts{color:#FFF}span.yshortcuts:active,span.yshortcuts:focus,span.yshortcuts:hover{text-decoration:none;color:#FFF;background-color:none;border:none}#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}.a6S{opacity:.01!important}.h1,.h2,.h3,h1,h2,h3{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:700}.img,.img-headline{color:#FFF;font-family:sans-serif!important;text-align:center}.h1,h1{font-size:40px;line-height:44px}.h2,h2{font-size:30px;line-height:34px}h3{font-size:24px;line-height:28px}.h3,.img{font-size:18px}.h3{margin:0 0 8px}.img{background-color:#006554;line-height:22px}.img-headline{font-size:36px;font-weight:900;line-height:42px}p{/*!important;*/margin-bottom:1em}.contact{color:#FFF!important;text-decoration:none!important}.webkit{max-width:640px;margin:0 auto}#media all and (min-width:640px){.left{text-align:left;text-align:left!important}.right{text-align:right;text-align:right!important}}#media all and (max-width:639px){.mobile,.mobile_triggerproduct{display:inline-block!important}.border-container,.container,.mobile,.mobile_triggerproduct,.wrapper{padding:0!important;width:100%!important}.border-container,.container,.img,.img-headline,.mobile,.wrapper,table[class=button]{width:100%!important}.wrapper{margin:0!important}.border-container{max-width:95%}.mobile_triggerproduct{max-width:639px!important}.img,.img-headline{height:auto!important}[class=mobileOff]{width:0!important;display:none!important}[class*=mobileOn]{display:block!important;max-height:none!important}.center{text-align:center!important}.mobileOnly{display:block!important}.hideOnMobile{display:none!important}.left,.right{text-align:center;text-align:center!important}}#media all and (max-width:480px){.h1,h1{font-size:28px!important;line-height:32px!important}.h2,h2{font-size:24px!important;line-height:28px!important}.h3,h3{font-size:18px!important;line-height:22px!important}}
/* endinject */
/* inject:css/fonts.min.css */
#media screen{#font-face{font-family:DINPro-Light;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Light.svg#DINPro-Light) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Medium;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Medium.svg#DINPro-Medium) format('svg');font-weight:400;font-style:normal}#font-face{font-family:DINPro-Black;src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot);src:url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.eot?#iefix) format('embedded-opentype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff2) format('woff2'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.woff) format('woff'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.ttf) format('truetype'),url(http://assets.dsg.com/dsg/fonts/din/DINPro-Black.svg#DINPro-Black) format('svg');font-weight:400;font-style:normal}}
/* endinject */
/* inject:css/brand.min.css */
.freeShip,body{font-weight:400}.flashPromo,.flashPromoSmall{mso-line-height-rule:exactly}.navbar a,a{text-decoration:none}a{color:inherit;display:block;max-width:100%;text-decoration:none text-align: center}body{font-family:Arial,sans-serif;margin:0!important;padding:0;background-color:#FFF;-ms-text-size-adjust:100%}.bonus-product-details{color:#F5F5F5;font-size:12px;line-height:18px;margin:0 10px}.disclaimerDark,.disclaimerLight{font-family:Arial,sans-serif;font-size:10px;font-size:10px!important;letter-spacing:.05rem;line-height:14px;mso-line-height-rule:exactly}.disclaimerDark{color:#FFF!important}.disclaimerLight{color:#212121!important}.freeShip{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px}.headline,.logo{font-weight:900}.headline{font-family:DINPro-Black,Arial,sans-serif!important;font-size:36px;line-height:40px;margin:20px 0 0;padding:0 20px}.logo{background-color:#006554;color:#FAFAFA;font-family:sans-serif;font-size:24px;line-height:36px;text-align:center;max-width:175px;width:117px;height:auto}.navbar,.navbar .column-nav,.navbar a{text-align:center!important}.navbar{font-size:0}.navbar .column-nav{display:inline-block;max-width:320px;vertical-align:top;width:auto}.navbar a{display:inline-block;font-family:DINPro-Medium,Arial,sans-serif!important;font-size:14px;padding:16px 0;text-transform:uppercase}.footer,.preheader{font-family:Arial,sans-serif}.preheader{color:#707070;Margin-top:4px;Margin-bottom:0;Margin-left:10px;Margin-right:10px;font-size:11px}.one-column p{margin-bottom:14px!important;margin-top:14px!important}.flashPromoSmall{font-family:DINPro-Light,Arial,sans-serif!important;font-size:32px;font-weight:300;line-height:32px}.flashPromo{font-family:DINPro-Black,Arial,sans-serif!important;font-weight:900;line-height:40px}.pricing,.productInfo{font-family:Arial,sans-serif!important;margin:0}.pricing{font-weight:700;line-height:24px;font-size:14px}.productInfo{font-size:16px;font-weight:500}.productNameTab{font-size:18px;line-height:20px;margin:4px 20px;padding:0}.productPriceTab{font-size:16px;line-height:18px margin: 4px 0;padding:0}.productPromo{font-family:DINPro-Black,Arial,sans-serif;font-size:28px;font-weight:700;line-height:34px;margin:0 20px;padding:0}.subheadline{font-family:DINPro-Medium,Arial,sans-serif!important;font-size:30px;line-height:34px;font-weight:500;margin:0;padding:0 20px}.text{padding-top:16px}.valueCopy{font-family:DINPro-Medium,Arial,sans-serif!important;font-weight:400!important;margin:0}.welcome{color:#F6992F;font-family:DINPro-Medium,Arial,sans-serif;font-size:26px;margin:0;padding:0}.text{padding:16px 16px 0}.deviceWidth{width:33%;max-width:211px!important}.deviceWidth200{width:100%!important;max-width:180px}#media only screen and (max-width:480px){.bonus-product-details{font-size:12px!important;line-height:18px!important}.headline{font-size:40px!important;line-height:44px!important}.subheadline{font-size:24px!important;line-height:28px!important}.productNameTab,.productPriceTab{font-size:90%!important;line-height:95%!important;margin:8px 10px!important}.productPromo{font-size:24px!important;line-height:28px!important}.welcome{font-size:20px!important;line-height:21px!important}}#media only screen and (max-width:639px){.deviceWidth,.deviceWidth200{display:inline-block!important}table[class=button]{width:100%!important}.deviceWidth{width:49%!important;max-width:211px}.deviceWidth200{width:32%!important}}
/* endinject */
</style>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings> <o:AllowPNG/> <o:PixelsPerInch>96</o:PixelsPerInch> </o:OfficeDocumentSettings> </xml><![endif]-->
<!--[if (gte mso 9)|(IE)]><style type="text/css"> table {border-collapse: collapse;} </style> <![endif]-->
</head>
<body style="margin:0; padding:0; background-color:#FFFFFF;">
<!--[if gte mso 10]><style> /* Style Definitions for MSO 2010 */ table.MsoNormalTable, p, span, div, table, tr, td, th, a, h1, h2, h3 { mso-style-priority:99; font-family:"Arial","sans-serif"; } </style><![endif]-->
<center>
<div class="webkit"><!--[if (gte mso 9)|(IE)]><table width="640" align="center"><tr><td><![endif]-->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top" style="margin:0; padding:0;">
<!--# EMAIL BODY CREATIVE #############-->
<!--# Hero w/ Coupon (embedded background – image headline - left-aligned)-->
<table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width:640px; width:100%; background-position:right top !important; background-size:cover !important;" bgcolor="#006554">
<tr>
<td background="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg" bgcolor="#006554" width="640" align="center" valign="top" style="background-position:right top !important; background-size:cover !important;">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; width:640px; height:790px;" src="http://dsg.images.harmony.epsilon.com/_phoenix/_dev/codex/img/hero_baseball_bg.jpg"/>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="border: 0;display: inline-block; position: absolute; width:640px; height:790px;">
<v:fill opacity="0%" color="#F8F8F8"/>
<v:textbox inset="20px,0,0,0">
<![endif]-->
<div>
<table width="640" cellpadding="0" cellspacing="0" border="0" class="wrapper" >
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 0 16px;">
<table width="600px" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-right:4px; padding-bottom: 16px !important;">
<!-- button-basic -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#F5F5F5; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="54" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#212121;">
<a href="http://heroLink.com" target="_blank" style="color:#212121; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#212121;">
SHOP NOW
</span></a>
</td>
</tr>
</table>
<!-- /button-basic -->
</td>
<td width="50%" class="mobile" align="center" valign="top" style="width:50%; padding-left:4px; padding-bottom: 16px !important;">
<!-- button-border -->
<table class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:inherit; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<tr>
<td width="100%" height="52" align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#F5F5F5; border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
<a href="http://heroLink.com" target="_blank" style="color:#F5F5F5; text-decoration:none; width:100%; display:block; padding-top:16px; padding-bottom:16px;"> <span style="display:inline-block; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; color:#F5F5F5;">
VIEW IN-STORE COUPON
</span></a>
</td>
</tr>
</table>
<!-- /button-border -->
</td>
</tr>
</table>
</td>
</tr>
<!--[if (gte mso 9)|(IE)]><tr><td height="15" style="font-size:15px; line-height:15px;"> </td></tr><![endif]-->
</table>
<!--spacer--><table><tr><td height="40" style="font-size:40px; line-height:40px;"> </td></tr></table><!--/spacer-->
<p class="disclaimerDark" style="font-family:Arial, sans-serif; Font-size:12px; font-size:12px !important; letter-spacing:normal; line-height:11px; text-align:center; margin:10px 0; padding:0 20px; color:#F5F5F5;">
<!--disclaimer copy-->
Replace this line of text with your disclaimer copy.
</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--/END Hero w/ Coupon (embedded background - image headline – left-aligned)-->
<!--/ EMAIL BODY CREATIVE /////////////-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></div>
</center>
</body>
</html>

This is one of my favourite email bugs/issues/caveats.
padding-left does not work in Outlook when inside a VML shape.
A lot of the styles could be removed from your button code. I'd also try adding a fixed width to the .button table. This combined with text-align center on the a parent td should keep the copy centered.
<table align="center" class="button" border="0" cellpadding="0" cellspacing="0" width="150">
<tr>
<td align="center" style="font-size:16px; line-height:16px; text-align:center; font-family:'DINPro-Medium',sans-serif; color:#ffffff; padding-top:16px; padding-bottom:16px;">
<a href="http://TabHeroLink.com" target="_blank" style="color:#ffffff; text-decoration:none;">
SHOP THIS DEAL
</a>
</td>
</tr>
</table>
One small thing to note too is your white button is using align="left", pulling it further over. Change that to center

<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden; mso-padding-alt:0px 20px 0px 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; mso-padding-alt:0px 18px 0px 18px;">
You could change the above code to the below code:
<table align="center" class="button" width="100%" border="0" cellpadding="0" cellspacing="0" style="background-color:#015F81; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; overflow:hidden;margin:0 20px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-color:#F5F5F5; border-width:2px; border-style:solid; background-color:inherit; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; margin:0 18px">

I was able to fix this myself by implementing an outlook ghost table with the table at 640, the td at 600 and both having align="center"

Newsletter with a background image

I want to create a newsletter with a background image/frame and I was wondering what is the best way to do that. If you have any suggestions please share.
The background image is here
This is the code that I manage to write so far but I can't find a way to center the td and also I will have to add on top of the image text and logos. Would that be possible and if it is, would it be compatible with most of the email clients used like outlook or gmail?
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:#ffffff;">
<!--[if gte mso 9]>
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="https://i.imgur.com/xRYqx1Y.png" color="#7bceeb"/>
</v:background>
<![endif]-->
<table align='middle' height="100%" width="100%" cellpadding="0" cellspacing="0" border="0" repeat="none">
<tr>
<td align='middle' valign="middle" style="background-repeat: no-repeat; text-align: center;" background="https://i.imgur.com/xRYqx1Y.png">
</td>
</tr>
</table>
</div>
</body>
</html>

Like everything in email design and development, background images
have mixed support across email clients. Most clients support one
techniques described below, the most notable exclusions being
earlier versions of Android, some Gmail clients, and some of the
webmail clients, which vary greatly depending on which browser is
used.
The closer we can get is by using BULLETPROOF BACKGROUNDS
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="https://i.stack.imgur.com/qNm7c.png" bgcolor="#7bceeb" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="https://i.stack.imgur.com/qNm7c.png" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
test
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
But even in that, we have limitations in some major clients like Gmail Chrome for more details read this article from JASON RODRIGUEZ.

Add class to your table. Then in CSS file use the code like this
.class{background-image:URL(/image.png) no-repeat;}

Table width in Internet Explorer /Microsoft Outlook

I'm working on a mailing and I'm having problems with setting a width in a table element in IE/ Outlook.
I have tried several things which I've seen in other questions but none of them seems to work.
The code is this, it includes some solutions I've tried. The div which wraps the table is used for other styling necessities.
<!doctype html>
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
body{
box-sizing: border-box;
}
table{
border-collapse: collapse;
border-spacing: 10px 5px;
}
</style>
</head>
<body>
<div style="margin:0 auto; width:1000px;">
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
<table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<!--A lot of <TR> -->
</table>
<!--[if mso]>
</td></tr></table>
</center>
![endif]-->
<div>
</body>
</html>

Here is a example of what we use:
<table style="background-color: #f7f7f7;" cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody>
<tr>
<td valign="top" align="center">
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tbody>
<< DROP HERE YOUR TEMPLATE>>
</tbody>
</table>
</td>
</tr>
</tbody>
I hope this is the solution.

Your code is almost good, you missed closing the endif for the second one. Try the below code and see how it goes.
<!doctype html>
<html lang=en>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
*{
margin:0;
padding:0;
}
body{
box-sizing: border-box;
}
table{
border-collapse: collapse;
border-spacing: 10px 5px;
}
</style>
</head>
<body>
<div style="margin:0 auto; width:1000px;">
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
<table cellpading="0" cellspacing="0" width=700 style="margin:0 auto; width: 700px">
<tr><td>
<!--A lot of <TR> -->
Content here
</td></tr>
</table>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->
<div>
</body>
</html>

CSS file IE firefox chrome

In my css file I have the following code and want it to applied on caption of my table
caption
{
color:green;
font-style:bold;
}
my html file
<html> <head>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
<title>Home Page - My Schedule</title> </head> <body>
<center> <h2>write your name here...</h2>
Home Page My CV My Schedule My Courses Banner Links Frames
<br/> <table border="1" width="800" height="300" align="center"> <caption><h3>My Schedule</h3></caption>
<br/> <thead> <tr align="center"> <td><img src="img3.jpg" alt="" width="200" height="280"></td> <td colspan="4"><center><h4>write your name here - level 4</h4> </td> </tr> </thead> <tr align="center"> <td>1</td> <td>Web Design</td> <td bgcolor="#C0C0C0" >Off</td> <td colspan="2">management</td> </tr> <tr align="center"> <td>2</td> <td>management</td> <td bgcolor="#C0C0C0" colspan="3">Off</td> </tr> <tr align="center"> <td>3</td> <td bgcolor="#C0C0C0">Off</td> <td >management</td> <td colspan="3">management</td> </tr> <tr align="center"> <td>4</td> <td>Web Design</td> <td>management</td> <td>math</td> <td bgcolor="#C0C0C0">Off</td> </tr> <tr align="center"> <td>5</td> <td bgcolor="#C0C0C0" colspan="4">Off</td> </tr> </table>
Go Back </center> </body> </html>
but the problem is that code working fine on IE but not working on Firefox and Chrome. I tried to clear cache but nothing help.
Secondly, I have my website in the following path
C:\Users\user\Desktop\My Website
and my css file in the following path
C:\Users\user\Desktop\My Website\styles
and I am not able to link css file when its in this subfolder
I tried the following code
<link href="../mystyles.css" rel="stylesheet" type="text/css" />
<link href="../styles/mystyles.css" rel="stylesheet" type="text/css" />
but not working.

Replace
<link href="mystyles.css" rel="stylesheet" type="text/css" />
With
<link href="styles/mystyles.css" rel="stylesheet" type="text/css">
You haven't told your HTML file that the mystyles.css file is in the styles folder.
FYI..
<link href="../mystyles.css" rel="stylesheet" type="text/css" />
Would be C:\Users\user\Desktop\mystles.css
and
<link href="../styles/mystyles.css" rel="stylesheet" type="text/css" />
Would be C:\Users\user\Desktop\styles\mystles.css

Resources