Re: Code for module hero banner, where image can be uploaded for the background, and live editable text in foreground. Must work in Outlook.

Christine_LeBla · ‎02-20-2025

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]>&nbsp;&nbsp;<![endif]-->READ MORE 
<!--[if gte mso 9]>&nbsp;&nbsp;<![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.

Disha_Goyal6 · ‎02-20-2025

Hi @Christine_LeBla, please check the below code:

<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: url('http://templates.marketo.net/event3/bg-hero.jpg'); background-repeat:no-repeat;background-size: cover; background-color:#7e3f6c;background-position: center center;" valign="top" bgcolor="#7e3f6c"> 
<center> 
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 660px; height: 226px;" src="http://templates.marketo.net/event3/bg-hero.jpg" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 660px; height: 226px;">
<v:fill opacity="0%" color="#7e3f6c" />
<v:textbox 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]>&nbsp;&nbsp;<![endif]-->READ MORE 
<!--[if gte mso 9]>&nbsp;&nbsp;<![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:fill>
</v:rect>
</v:image>
<![endif]-->
</center></td> 
</tr> 
</tbody> 
</table>

Hope this helps!

Thanks,

Disha

Christine_LeBla

Here is some more specific code in question. Each table container will have a different background pattern and the amount of live text on top will vary. Some containers will vertically grow based on how much text content is input by the person using the template within a program for HTML email blast. And, note this table container will be

              <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" mktoname="Hero"> 
                      <tbody> 
                        <tr> 
                          <td class="module" style="word-break: break-word;-moz-hyphens: none;hyphens: none;border-collapse: collapse;-webkit-hyphens: none;background-image:${heroBackgroundImage};background-repeat: no-repeat;padding-left: 0;background-size: cover;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;background-position: center center;" valign="top" bgcolor="${heroBackgroundColor}" background="${heroBackgroundImage}"> 
                            <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="${heroBackgroundImage}" color="${heroBackgroundColor}" />
					<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" mktoname="Title" id="title">
                                                FEATURED NEWS
                                              </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" mktoname="Date" id="date">
                                                Lead in line here; keep brief
                                              </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="${heroButtonBackgroundColor}"><a class="primary-font button" href="${heroLink}" 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:${heroBorderSize};border-right-width:${heroBorderSize};border-bottom-width:${heroBorderSize};border-left-width:${heroBorderSize};border-top-style: solid;border-right-style: solid;border-bottom-style: solid;color: 
#ffffff;border-top-color:${heroBorderColor};border-right-color:${heroBorderColor};border-bottom-color:${heroBorderColor};border-left-color:${heroBorderColor};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:${heroButtonBackgroundColor};"> 
                                                        <!--[if gte mso 9]>&nbsp;&nbsp;<![endif]-->${heroLinkText} 
                                                        <!--[if gte mso 9]>&nbsp;&nbsp;<![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>

And, the same container repeated so person using the template can use this alternative hero banner with different font color and different background image:

   <table class="mktoModule module_wrapper m_hero" id="hero60a0b02f-653b-422d-8014-d3a730537b7a" style="border-spacing: 0; border-collapse: collapse;" align="center" width="100%" cellspacing="0" cellpadding="0" border="0" mktoname="Hero-clone-clone"> 
                      <tbody> 
                        <tr> 
                          <td class="module" style="word-break: break-word;-moz-hyphens: none;hyphens: none;border-collapse: collapse;-webkit-hyphens: none;background-image:${heroBackgroundImage};background-repeat: no-repeat;padding-left: 0;background-size: cover;background:${heroBackgroundImage};background-color:${heroBackgroundColor};padding-top: 0;padding-right: 0;padding-bottom: 0;background-position: center center;" valign="top" bgcolor="${heroBackgroundColor}" background="${heroBackgroundImage}"> 
                            <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="${heroBackgroundImage}" color="${heroBackgroundColor}" />
					<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; padding-bottom: -20px"> 
                                              <div class="mktoText" mktoname="Title" id="title094530a6-3363-4d3c-9a59-59aaf8480f63">
                                                <p style="color: #002f87;">Headline Text Here</p>
                                              </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" mktoname="Date" id="date3de8cd46-474a-4ff5-9d9e-896753effa76">
                                                <p style="color: #444444;"><span id="heroBodyTxtSpan" style="font-size: 22px;">Use this hero option to say more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat dignissim orci. Quisque nec vestibulum ligula. Nulla varius tellus sit amet elementum lacinia.</span></p> 
                                                <ul> 
                                                  <li style="font-size: 18px; color: #444444;"><span style="font-size: 22px;">Vivamus pretium turpis vitae magna tristique rutrum</span></li> 
                                                  <li style="font-size: 18px; color: #444444;"><span style="font-size: 22px;">Ut sollicitudin quam eget dolor accumsan ultrices</span></li> 
                                                  <li style="font-size: 18px; color: #444444;"><span style="font-size: 22px;">Nam at porttitor mi, quis molestie nisl</span></li> 
                                                </ul> 
                                                <p><span style="font-size: 22px; color: #444444;">Dive into our newsletter. Read on. Thank you for your interest!</span></p>
                                              </div> </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>

I need to ensure the background image "cover" is spanning edge-to-edge in the table it fills, from top to bottom. Outlook is cutting the background image off, as well as cutting off the text like it is imposing a margin within the table.

Can you suggest how I can try something other utilizing this code and call out what specifically ought to change? I keep reading how CSS in Outlook does not support background cover so well. But any work around with the HTML I am willing to try.

Thank you.

Disha_Goyal6

Hi @Christine_LeBla, could you please share some screenshot of how it is rendering?

Christine_LeBla

Sure. This gives you an idea as to what is happening - more specifically in Outlook. And some of these hero containers will have a lot of text, introducing what topics are in the email. Sort of like a table of contents so the height of the container should expand vertically without overlapping any containers below. They should auto-push down.

Thank you.