VML + HubSpot Module

[cstruble]

Hello,

I'm trying to implement "bulletproof" email background images into my email templates (as the background image currently doesn't show in Outlook). However, I am not sure how to get the VML code to work with our module where the end-user adds the background image...

Here's my current code that works (but the image is hard coded within VML):

<!--Outlook Fix for Background Image-->
<td valign="top" colspan=12 width="100.0%" class=" column" style="width:100.0%; text-align: left; padding: 0; font-family: {{ primary_font }}; font-size: {{ primary_font_size }}; line-height: 1.5em; color: {{ primary_font_color }}; background-color:#30ccc9; background-position:center center; background-size:cover; {% module "module_16129825897992" path="/Navigate360/Email/parts/Email Background Image", label="Email Background Image", no_wrapper=True %}">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;">
<v:fill type="tile" src="https://info.navigate360.com/hubfs/Email%20Headers/600x725/Nav360-K12-EB-070221-How%20District%20Lea..." color="#30ccc9" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<div>
<!--End Outlook Fix for Background Image-->

Any ideas? 

Thank you in advance.

[cstruble]

@MiaSrebrnjak - Thank you for the reply. The article by @Stephanie-OG was extremely helpful and will resolve my issue from my initial tests. 

Thanks again for your help!

[MiaSrebrnjak · Accepted solution]

Hi @cstruble,

Thank you for reaching out to the Community! There are 2 resources I wanted to share as a starting point: 

• Have you checked this recently updated how-to guide on background images for marketing emails?  
• This great Community post where @Stephanie-OG explains her workaround is a bit older, but it could be helpful as well. @Stephanie-OG do you maybe have any additional input you would like to share? Thank you! 

I hope this helps! 

Cheers 

Mia