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
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 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
I am creating Email Template. Where I want and background image for <td>. I have used VML code to make it work on Outlook and its older versions. I have tested my Email Template and it is working fine in Browser and GMAIL but not working in OUTLOOK
I want to achieve the result which is in below screenshot. Which I am getting in Browser and GMAIL but no in OUTLOOK
In Outlook text Your Quertly Update is rendering on top left.
I have tried to use
position: absolute; top: 50%; left:0 right: 0;
but that is also not working
Here is the code below which I am using.
Code:
<table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
<tr>
<td background="https://picsum.photos/600/100" bgcolor="#ffffff" width="530" height="95" valign="middle" style="background-image: url('https://picsum.photos/600/100');background-repeat:no-repeat; text-align:center; vertical-align:middle;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
<v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p style="font-family:Arial, Helvetica, sans-serif; font-size:40px; color:#ffffff; margin: 0;">Your quarterly Update</p>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Is there anything which I need to change in VML code to get my text in
center and middle, vertically and horizontally.
Take the contents of the paragraph and place it in a table with padding on the td. Below is the method I use:
<table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
<tr>
<td background="https://picsum.photos/600/100" bgcolor="#ffffff" width="530" height="95" style="background-image: url('https://picsum.photos/600/100');background-repeat:no-repeat;vertical-align:top;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
<v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="600" height="100" align="center">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:40px; color:#ffffff;text-align:center;padding-top:20px;">Your quarterly Update</p></td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Hope this is the answer you were looking for.
Cheers
Try adding a 100% width div with align center as a wrap around your bg image element :
<!--[if gte mso 9]>
<div align="center" style="text-align:center; width: 100%;">
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:530px;height:95px;color:#ffffff">
<v:fill type="tile" src="https://picsum.photos/600/100" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<p style="font-family:Arial, Helvetica, sans-serif; font-size:40px; color:#ffffff; margin: 0;">Your quarterly Update</p>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
</div>
<![endif]-->
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.