I have background images in my email which I've configured using bulletproof backgrounds. In Litmus, the previews look exactly how I want it to be for Outlook.
However, for the latest version of Office 365 (Version 1808 - Build 10730.20102), the background image doesn't cover the td's entire width?
Preview:
The dark blue-ish color is the fallback color, but for that specific Outlook version, the background image is not covering the entire td.
Unsure why this is?
Code:
<table>
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="min-height:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Please check again some changed.
<table bgcolor="#1f3c5a" style="vertical-align: top; background-position: top center; background-repeat: no-repeat;background-size: cover; -webkit-background-size: cover; max-height: 384px; width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td height="384px" width="600" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="min-height:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<!-- Condition to allow background images to work in Outlook -->
<td style=" background-repeat: no-repeat;background-size: cover; max-height: 384px; min-width:600px;" background="https://storage.pardot.com/213851/80721/email_insert_1.png" bgcolor="#1f3c5a" height="384px" width="1000" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px; height: 384px;">
<v:fill type="tile" src="https://storage.pardot.com/213851/80721/email_insert_1.png" color="#1f3c5a" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="min-height:300px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<!-- Creating padding above nested div -->
<tr>
<td height="30" style="height:30px;">
<!--PADDING-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
Run code snipp
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'm coding up HTML emails. I have a td containing a background image. It renders in all major email clients bar Outlook on Windows. I opted to use http://backgrounds.cm/ as a workaround. My issue is the images height and width do not correspond to the values entered. The image appears squashed. I am using it as part of a nested table.
<td class="full" width="300px" style="width: 300px;">
<table>
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" 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; width: 200px; height: 200px;">
<v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="width: 200px; height: 200px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</tr>
<table>
</td>
I am trying to make it work now.
It looks like the default for the image itself is 567 x 341.
i think this may work
<td class="full" width="300px" style="width: 300px;">
<table>
<td background="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" width="200" height="200" bgcolor="#7bceeb" valign="top">
<tr>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000; width: 200px; height: 200px;">
<v:fill type="tile" src="http://www.gstatic.com/tv/thumb/persons/8327/8327_v9_bb.jpg" color="#7bceeb" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div style="width: 200px; height: 200px;">
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</tr>
<table>
A more robust method would be to use the CSS 'background-image' property - the HTML attribute 'background' still works, but it is technically depreciated. The background attribute also doesn't allow you to resize images, so that might be the problem that you are seeing.
Personally, this is how I usually approach it:
<td align="center" style="background-image: url('http://path.to/image.png'); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: your-colour;"></td>
The other properties are to stop the background image repeating, position the image top and center, and stretch it out to cover the allocated space - the 'background-color' property is just a fallback colour for if images aren't automatically rendered, to maintain an overall design aesthetic.
There's a great litmus article on this here:
https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email
Hope this helps!
I'm trying to get the banner to center as you it sizes down to a smaller resolution as opposed to pushing the image to the right. Here is the page I am referring to. Page
I'm using 100% width.
<!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
<tr class="heading">
<td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
<table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
<tr>
<td background="https://www.acuity-sports.com/newsletter/images/banner10.jpg" bgcolor="#ffffff" width="100%" height="400" valign="top">
<img editable width="600" src="" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
<v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- END TEMPLATE HEADING IMAGE - Full 100% Width // -->
use css properties: background-position for td with your banner
background-position: center;
for your element will make center align.
Also you can do it via style attribute
style="background-position: center;"
try this code
<!-- BEGIN TEMPLATE HEADING IMAGE - Full 100% Width // -->
<tr class="heading">
<td align="center" valign="top" id="preview" bgcolor="#FFFFFF" style="background-color:#FFFFFF; padding:0px; border-bottom:1px solid #eeeeee;">
<table cellpadding="0" cellspacing="0" border="0" height="400" width="100%">
<tr>
<td bgcolor="#ffffff" width="100%" height="400" valign="top">
<img width="100%" src="https://www.acuity-sports.com/newsletter/images/banner10.jpg" style="max-width:600; border:0px; display:block;" mc:edit="header_image" />
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:350px;">
<v:fill type="tile" src="images/main_image.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
try this online demo: http://jsfiddle.net/40jhoe0x/1/
thank you
Does anyone know how to align a table right within a VML textbox? Left and center work fine but Right seems to get ignored....
Heres and example of the code
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#DDDDDD" style="background-image: url('http://i.imgur.com/XCnBXwP.png');" background="http://i.imgur.com/XCnBXwP.png" height="92" valign="top"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table width="300" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td bgcolor="#FF00FF" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold;"> | This is test text | </td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
Try setting your <div> to width:100%;. If that doesn't fix it, put a 100% width table in there, nest and align the child (your desired content) within that.
Example:
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#DDDDDD" style="background-image: url('http://i.imgur.com/XCnBXwP.png');" background="http://i.imgur.com/XCnBXwP.png" height="92" valign="top"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="width:100%;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<table width="300" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td bgcolor="#FF00FF" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold;"> | This is test text | </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
Sorry, late coming to the party...
you need an extra div with align="right" before you table & contents. VML textbox ignores align on tables for some reason.
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td bgcolor="#DDDDDD" style="background-image: url('http://i.imgur.com/XCnBXwP.png');" background="http://i.imgur.com/XCnBXwP.png" height="92" valign="top"><!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:92px;">
<v:fill type="tile" src="http://i.imgur.com/XCnBXwP.png" color="#7bceeb" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<div align="right">
<table width="300" border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td bgcolor="#FF00FF" align="right" style="font-family:Arial, Helvetica, sans-serif; font-size:20px; font-weight:bold;"> | This is test text | </td>
</tr>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
And here is the link
I am trying to apply a repeating background to a table cell for an html email, I am using the code from http://backgrounds.cm/
Here is my TD and wrapper VML:
<td background="http://domain.com/Portals/0/emails/images/stripes-middle.png" bgcolor="#00ff00" width="346" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:346px;">
<v:fill type="tile" src="http://domain.com/Portals/0/emails/images/stripes-middle.png" color="#ff0000" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<p>LOTS OF CONTENT IN HERE</p>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
However, it is renderring my background image up in the top left of the parent table! Not within the table cell. How can I fix this?
why not nest it in another table then?
<table border="0" cellpadding="0" cellspacing="0" width="640" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="346" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td background="http://domain.com/Portals/0/emails/images/stripes-middle.png" bgcolor="#ff0000" width="346" height="112" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:346px;height:112;">
<v:fill type="tile" src="http://domain.com/Portals/0/emails/images/stripes-middle.png" color="#ff0000" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table border="0" cellpadding="0" cellspacing="0" width="346" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<p>LOTS OF CONTENT IN HERE</p>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
can't pinpoint exactly where you're going wrong, but I've never used fit-shape-to-text before and this snippet hasn't done me wrong.