CMS Development

zichenghu
Membre

Background image for Email Template not showing

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:13.JPG

 

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:14.JPG

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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:15.JPG

 

 

 

 

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?




0 Votes
1 Réponse
edjusten
HubSpot Employee
HubSpot Employee

Background image for Email Template not showing

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? 


Did my post help answer your query? Help the Community by marking it as a solution
0 Votes