Hi,
Seeking working code for module hero banner; where image can be uploaded by an admin for the background of the container, and still have live, editable text in the foreground. It must work in Outlook. I am using a Marketo provided email template, however there are issues likely due to CSS for background: cover; being utilized. In Outlook, image pushed outside of container (overspills), vertically, breaking that container and bugging up the email rendering.
Please advise. Seeking rock solid, working solution.
Marketo code in template:
a<table class="mktoModule module_wrapper m_hero" id="hero" style="border-spacing: 0; border-collapse: collapse;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="module" style="word-break: break-word;-moz-hyphens: none;hyphens: none;border-collapse: collapse;-webkit-hyphens: none;background-image:http://templates.marketo.net/event3/bg-hero.jpg;background-repeat: no-repeat;padding-left: 0;background-size: cover;background:http://templates.marketo.net/event3/bg-hero.jpg;background-color:#7e3f6c;padding-top: 0;padding-right: 0;padding-bottom: 0;background-position: center center;" valign="top" bgcolor="#7e3f6c" background="http://templates.marketo.net/event3/bg-hero.jpg">
<center>
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:226px">
<v:fill type="frame" src="http://templates.marketo.net/event3/bg-hero.jpg" color="#7e3f6c" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table class="full" style="border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; width: 600px;" align="center" width="600" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="spacer" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="20"></td>
</tr>
<tr>
<td class="contents" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="col d100 t100 p100" style="border-spacing: 0; border-collapse: collapse; width: 600px;" align="left" width="600">
<tbody>
<tr>
<td class="spacer" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="30"></td>
</tr>
<tr>
<td class="primary-font title" style="word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;font-family:'Varela Round', Arial, sans-serif;color: #ffffff;font-size: 49px;font-weight: bold;">
<div class="mktoText" id="title">
GET READY!
</div> </td>
</tr>
<tr>
<td class="primary-font date" style="word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;font-family:'Varela Round', Arial, sans-serif;color: #ffffff;font-size: 35px;">
<div class="mktoText" id="date">
March the 18
<sup>th</sup>
</div> </td>
</tr>
<tr>
<td class="spacer" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="10"></td>
</tr>
<tr>
<td class="cta" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table style="border-spacing: 0; border-collapse: collapse;" align="left" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="border-collapse: collapse; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;" align="left" bgcolor="#707be4"><a class="primary-font button" href="http://mylink" target="_blank" style="border-left-style: solid;font-size: 14px;text-decoration: none;padding-top: 0.8em;padding-bottom: 0.8em;padding-left: 1.3em;padding-right: 1.3em;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;color:
#ffffff;border-top-color:#707be4;border-right-color:#707be4;border-bottom-color:#707be4;border-left-color:#707be4;display: inline-block;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;-moz-background-clip: padding;-webkit-background-clip: padding-box;background-clip: padding-box;font-weight: 700;font-family:'Varela Round', Arial,
sans-serif;background-color:#707be4;">
<!--[if gte mso 9]> <![endif]-->READ MORE
<!--[if gte mso 9]> <![endif]--></a></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td class="spacer" style="word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" height="20"></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</center></td>
</tr>
</tbody>
</table>
The image I swapped in for the background is: 660 x 228.
Thanks.
.png)
Adchoices