Coding Background Image in Email Template for Outlook

Forum|Forum|1 year ago
November 13, 2024
1 reply
3063 views

I am trying to code a section that works in Outlook as well as other browsers. I have attached the code below, I have run quite a few different VML, but it keeps breaking. Is anyone familiar with making this work in Outlook?

<!--Background Image Section-->
                              
                              	<table class="mktoModule" mktoName="Background Image Section" id="bgImageSection" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">
									<tr>
										<td background="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" height="645" style="background:#fffffe url('https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png') no-repeat center center / cover; background-size:cover;background-position:center center;background-repeat:no-repeat;padding:10px 40px 10px 40px;vertical-align:top;height:645px;">
                                          	<!--[if mso]>
                                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%; height:645px;">
                                            <v:fill type="frame" src="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" color="#fffffe" />
                                            <v:textbox inset="0,0,0,0">
                                            <![endif]-->
											<div class="headerText mktoText" id="bgHeaderText1" mktoName="BG Header Text 1">HERE IS YOUR WHITE PAPER</div>
                                          	<div style="text-align:center; margin-top:70px; margin-bottom:25px;"><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/V3_RR_6.8.23_5_Used_EV_Reconditioning_Whitepaper_Autoresponder_Booklet.png?version=0"></div>
                                          	<div class="headerText1 mktoText" id="bgHeaderText2" mktoName="BG Header Text 2">Used EV Reconditioning Implications for Auto Dealers</div>
                                          	<div style="text-align:center; margin-top:50px; margin-bottom:20px;">
                                            	<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0" class="mktoText" id="button1" mktoname="Download Button" style="border-collapse:separate;width:225px;line-height:100%;">
                                                  <tr>
                                                  	<td bgcolor="${btn-bgcolor2}" style="border:none;border-radius:60px 60px 60px 60px;cursor:auto;mso-padding-alt:12px 0px 12px 0px;background:#f96e11;" valign="top"><a href="https://my.rapidrecon.com/l/708083/2023-06-14/tz5c8/708083/16867612888EoZj5oz/Used_EV_Recon_Implications_For_Auto_Dealers_v230613.pdf/?utm_medium=email&amp;utm_source=SLX" style="display:inline-block;width:225px;background:#f96e11;color:#ffffff;font-family:Raleway,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:100%;margin:0;text-decoration:none;text-transform:none;padding:12px 0px 12px 0px;mso-padding-alt:0;border-radius:60px 60px 60px 60px;" target="_blank"><span style="font-size:16px;font-family:Raleway,Arial,sans-serif;font-weight:700;color:#ffffff;line-height:119%;">Click Here to Download</span></a></td>
                                                  </tr>
                                              	</table>  
                                            </div>
                                          	<!--[if mso]>
                                            </v:textbox>
                                            </v:rect>
                                            <![endif]-->
										</td>
									</tr>
								</table>
                              
                              	<!--END Background Image Section-->

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Jo_Pitts1

Community Advisor

@kenmckown,

you will need something like this going before your standard HTML background stuff (you'll need to swap variable names and stuff):

<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block;width:600px;height:${mkto-campaign-banner-height}px;" src="${mkto-campaign-banner-background}" href="${mkto-cta-ur}" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="display: inline-block;position:absolute;width:600px;height:${mkto-campaign-banner-height}px;">
<v:fill opacity="0%" color="${mkto-image-bg-color}"  />
<v:textbox inset="0,0,0,0">

and at the end

</v:textbox>
</v:rect>

I make extensive use of Outlook background images. This should work for you

K

kenmckownAuthor

Level 4

The background is working, but all my text within is broken.

Disha_Goyal6

Community Advisor

Hi @kenmckown, please use this code.

<!--Background Image Section-->

                              

                              <table class="mktoModule" mktoName="Background Image Section" id="bgImageSection" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%;margin: 0 auto;border-spacing: 0;border-collapse: collapse;">

<tr>

<td background="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" height="645" style="background:#fffffe url('https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png') no-repeat center center / cover; background-size:cover;background-position:center center;background-repeat:no-repeat;padding:10px 40px 10px 40px;vertical-align:top;">

                                          <!--[if mso]>

                                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:100%; height:645px;">

                                            <v:fill type="frame" src="https://my.rapidrecon.com/l/708083/2023-03-07/skwfk/708083/1678206081z2ncTDUE/RR_3.7.23_5_Ways_to_Nurture_Whitepaper_Autoresponder_bg.png" color="#fffffe" />

                                            <v:textbox inset="0,0,0,0">

                                            <![endif]-->

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%;">

<tr>

<td><div class="headerText mktoText" id="bgHeaderText1" mktoName="BG Header Text 1">HERE IS YOUR WHITE PAPER</div></td>

</tr>

<tr><td style="font-size:1px; line-height:1px;" height="70">&nbsp;</td></tr>

<tr>

<td style="text-align:center;"><div><img src="https://go.autoshopsolutions.com/rs/180-DGD-014/images/V3_RR_6.8.23_5_Used_EV_Reconditioning_Whitepaper_Autoresponder_Booklet.png?version=0"></div></td>

</tr>

<tr><td style="font-size:1px; line-height:1px;" height="20">&nbsp;</td></tr>

<tr>

<td><div class="headerText1 mktoText" id="bgHeaderText2" mktoName="BG Header Text 2">Used EV Reconditioning Implications for Auto Dealers</div></td>

</tr>

<tr><td style="font-size:1px; line-height:1px;" height="50">&nbsp;</td></tr>

<tr>

<td>

<table align="${btn-alignment}" border="0" cellpadding="0" cellspacing="0" class="mktoText" id="button1" mktoname="Download Button" style="border-collapse:separate;width:225px;line-height:100%;">

  <tr>

<td bgcolor="${btn-bgcolor2}" style="border:none;border-radius:60px 60px 60px 60px;cursor:auto;mso-padding-alt:12px 0px 12px 0px;background:#f96e11;" valign="top"><a href="https://my.rapidrecon.com/l/708083/2023-06-14/tz5c8/708083/16867612888EoZj5oz/Used_EV_Recon_Implications_For_Auto_Dealers_v230613.pdf/?utm_medium=email&amp;utm_source=SLX" style="display:inline-block;width:225px;background:#f96e11;color:#ffffff;font-family:Raleway,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:100%;margin:0;text-decoration:none;text-transform:none;padding:12px 0px 12px 0px;mso-padding-alt:0;border-radius:60px 60px 60px 60px;" target="_blank"><span style="font-size:16px;font-family:Raleway,Arial,sans-serif;font-weight:700;color:#ffffff;line-height:119%;">Click Here to Download</span></a></td>

  </tr>

</table>  

</td>

</tr>

<tr><td style="font-size:1px; line-height:1px;" height="20">&nbsp;</td></tr>

</table>

                                         

                                         

                                         

                                          <!--[if mso]>

                                            </v:textbox>

                                            </v:rect>

                                            <![endif]-->

</td>

</tr>

</table>

                              

                              <!--END Background Image Section-->

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded