Background image for Email Template not showing

[zichenghu]

I'm trying to add a background image for my custom email template. I searched online and found a good solution. The basic steps are to create a custom module and then insert this module in my template.

I used the code from this site, http://www.bluleadz.com/blog/how-to-set-a-background-image-using-a-custom-module-in-hubspot , but the preview is always blank and nothing comes up at all, like this:

The solution code I used is here:

<style>
/** 
* Defualt HubSpot Body Container Class
*
* Here we are targeting the base class 
* used in HubSpot for the main content area.
**/
.body-container-wrapper {
	/* Set the image */
	background-image: url({{ widget.custom_bg_image.src }});
	/* Make sure the image fills the whole space by cropping the excess */
	background-size: cover;
	/* Determines where the origin is when cropping to fit the space */
	background-position: {{ widget.custom_bg_position }} center;
}
</style>

I'm sure I uploaded regular image and name it and its two fields according to the code I used, and I kept its size email-friendly, as shown below:

The code worked perfectly in the tutorial for landing page background, so I thought it would be similar to email template background. Here is how I add my custom module in the template:

Am I making a wrong assumption here? If this way doesn't work, what is the most convenient way to set up a background for my email template?

[edjusten]

Hi @zichenghu 

Apologies that no one has responded yet. 

Background images in email are difficult at best. HTML elements in email are depreciated so using the same technique as a web page will not work. Email clients vary in how they read email code, some will not recognize padding attributes, causing spacing issues galore.

This community thread discusses a couple of ways that you can apply background images in email using inline styling. Be sure to scroll down to the bottomg of the thread. For further questions, perhaps @Jsum could comment further?