CMS Development


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, , but the preview is always blank and nothing comes up at all, like this:13.JPG


The solution code I used is here:

* 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;


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?

1 Reply 1
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