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.
<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?
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.