My email build is using the well-known bulletproof background images that campaign monitor have kindly created. This ensures that these images render on various versions of outlook.
Although I'm using the correct HTML & VML code supplied, once testing my email it still does not render the background images on outlook.
I'm currently at my wit's end with this, the code looks perfect.
If there's something that doesn't look right please let me know.
<td background="https://image.ibb.co/dp5R4p/herobg.png" bgcolor="#7bceeb" width="640" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;">
<v:fill type="tile" src="https://image.ibb.co/dp5R4p/herobg.png" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table width="640" border="0" cellspacing="0" cellpadding="0" class="MainTable" style="width:640px; margin:0 auto;" align="center">
<tbody>
<tr>
<td style="padding:0px 0px 0px 0px;" class="padding-top-10" align="center">
<img src="https://image.ibb.co/dvzyue/herocta.png" alt="hero offer" width="600" class="width-100" style="width:600px;" border="0">
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
You've removed the height from the original code. I'm guessing that was for responsiveness, but the VML will only show up on Outlook Desktop, so it doesn't need to be responsive. Outlook needs the height to hold the shape open.
Related
I am trying to show the background image in Outlook using HTML emailer but it's not showing. I am getting only a blue box. I am using the below code but it's not working.
<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td>
<!--[if gte mso 9]>
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; background-color:#B5CFE3;height:431px;">
<v:fill type="frame" src="https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="background: url(https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png) #B5CFE3; background-size:cover; background-position:center;" height="430" width="750">
<!--add your content here-->
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Couple of issues here.
First, if you had it right, the content inside the VML would show on top. So the td with the background image for non-Outlooks would show again - but just the background colour. So we put that outside the VML.
Second, the background image should be on a <v:image ... />.
Working solution:
<table class="container" role="presentation" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td style="background: url(https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png) #B5CFE3; background-size:cover; background-position:center;" height="430" width="750">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 450pt; height: 150pt;" src="https://i0.wp.com/techacute.com/wp-content/uploads/2019/10/how-to-find-royalty-free-images-on-google-1.png" />
<v:rect xmlns_v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width: 450pt; height: 150pt;display: inline-block; position: absolute;background-color:#B5CFE3;">
<v:fill type="frame" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td>
<p>content here</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox></v:fill></v:rect></v:image>
<![endif]-->
</td>
</tr>
</table>
You'll see I also used points instead of pixels. Outlook tends to work better that way, particularly if using text zoom. (Multiply the pixel value by 0.75 to get points)
I created an eDM for client that only want it to be sent out from outlook desktop client. I have some issue with the css or rather I do not know what is the error. When I open up the eDM in web browser everything was ok and even insert the code in outlook client but when i receive the eDM itself the css layout have a slight change.
The Following image is what i have archive and open with web browser
This image shows the result after i sent and receive
As you can see the different is the line spacing there
How do i solve this error ? here is my code for that part. I am using Outlook 2013 Thanks
<table class="content" style="text-align: left; border-collapse:collapse;" width="240" cellpadding="0" cellspacing="0">
<tr class="grad" style="display:block;">
<td background="http://i1042.photobucket.com/albums/b423/Zayle_Ong/Whats%20new_zpsocpwuf08.png" height="36" valign="top" style="background-repeat: no-repeat; overflow:hidden;width:242px;display:block;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:240px;height:36px;background-color:white;background-repeat: no-repeat;">
<v:fill type="frame" src="http://i1042.photobucket.com/albums/b423/Zayle_Ong/Whats%20new_zpsocpwuf08.png" color="#E7E7E9" border="0" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table style="color: white; font-size: 15px; display:block; Margin-left:12px;" cellpadding="0" cellspacing="0">
<tr>
<td width="0" height="4" style="line-height:1px;font-size:1px;">
<font style="font-size:1px;display:none !important;display:none;"> </font>
</td>
</tr>
<tr>
<td>What's New</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
Sadly the ans to this is Outlook client mail do not support background images, and it only support most basic html Css codes. by saying that use Inline styling.
Solution to have editable text over the image is to set plain background colors.
Does outlook 2013 or infact any version of desktop client have problem with css rendering? there is this problem with table td background image in edm. my edm works perfectly fine if I sent it through web browsers but if I use outlook client the td background have slight css changes and I inspect the codes it add additional <span> and <p> before my td background.
This is the image of working edm
and this is the code
<td background="http://****Whatsnew.png" bgcolor="#E7E7E9" width="250" height="36" valign="top" style="background-repeat: no-repeat; display:block;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:260px;height:36px;">
<v:fill type="tile" src="http://*****Whatsnew.png" color="#E7E7E9" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table style="color: white; font-size: 15px; display:block; Margin-left:12px;" cellpadding="0" cellspacing="0" border-collapse="collapse">
<tr>
<td width="0" height="4" style="line-height:1px;font-size:1px;">
<font style="font-size:1px;display:none !important;display:none;"> </font>
</td>
</tr>
<tr>
<td></td>
<!-- 1ST COLUMN RIBBON TEXT -->
<td>What's New</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
and sent out through outlook client problem with css
code inspect, addition css is added the p and span class
Yes, there are some issues with HTML and CSS in Outlook, which uses Word to render HTML content. See: "Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007"
I am trying to add a text on top of an image as below. It is working on all email clients except Outlook 2010, Outlook 2007, Outlook 2013. Padding is ignored for all three. I have looked everywhere tried everything :( Please help me in getting the text on top of the image such that it has 147px left and 107px top padding/margin/?
Solved it finally as below:
<tr>
<td background="yourimage.gif" bgcolor="#c0393f" width="600" height="240" valign="top" style="background:url('yourimage.gif')">
<!-- M$ hack for table background images -->
<xsl:comment>
<![CDATA[[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" color="#c0393f" style="width:600px;height:240px;">
<v:fill type="frame" src="yourimage.gif" />
<v:textbox inset="107px,147px,0px,0px" id="headerTitle">
<![endif]]]>
</xsl:comment>
<font style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;">
<div style="color:#c9be8a;font-weight:700;font-size:19px;width:300px;text-transform:uppercase;padding:147px 0px 0px 107px;">
Your Text
</div>
</font>
<xsl:comment>
<![CDATA[[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]]]>
</xsl:comment>
</td>
</tr>
div padding is ignored in outlook. Your best bet is to insert a table inside the div and then pad the TDs inside of it.
There were some other errors in your code, that i made changes to in the below, but this works in Outlook. I would also recommend using padding-top, etc instead of just padding because i have found it is more widely accepted and consistent across email clients.
<table width="640" height="240">
<tr>
<td background="http://www.swagatobhatta.info/emailtest/header.gif" width="600" height="240" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
<v:fill type="tile" src="http://www.swagatobhatta.info/emailtest/header.gif" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="400" align="right" cellpadding="0" cellspacing="0" border="0" style="color:#c9be8a;font-weight:700;font-size:19px;width:400px;">
<tr>
<td style="text-transform:uppercase;padding-top:107px; padding-left:147px;">TEST CONTENTS TEST CONTENTS TEST CONTENTS</td></tr>
</table></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
I am trying to add a background image to a table element tr for email html template. There is also a text that is displayed at the top of the image.
The text is dynamic coming from a from field so I can not make it as
image in table elements.
The code I have is as follows
<tr>
<td background="http://bit.ly/1HXqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1HXqys9');width:600px;height:240px" width="600" height="240" valign="top" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
<v:fill type="tile" src="hhttp://bit.ly/1HXqys9" color="#c0393f" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; ">
Hello. This is my text.
</p>
</td>
</tr>
The problem with this is that the background image is not displayed in the following email clients
Outlook 2007, Outlook 2010, Outlook 2011, Outlook 2013, Gmail Firefox, Gmail chrome, Outlook.com explorer, Outlook.com Chrome, Yahoo Mail Explorer,Yahoo Mail Chrome
can you put the code inside a table and try. I think it will work
<table border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td background="http://bit.ly/1HXqys9" bgcolor="#c0393f" style="background-image: url('http://bit.ly/1HXqys9');width:600px;height:240px" width="600" height="240" valign="top" >
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:240px;">
<v:fill type="tile" src="hhttp://bit.ly/1HXqys9" color="#c0393f" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p style="color:#c9be8a;font-weight:700;font-size:19px;width:220px; text-transform:uppercase ;margin:147px 0px 0px 107px; ">
Hello. This is my text.
</p>
</td>
</tr>
</table>