Background image

[LDjelloul]

Hi all!

I want to use an image as a background with the tool background image (in the email conceptor).

I suppose that because of the responsive mode, the image doesn’t keep its proportions if the body is longer or if the page is reduced.

I want to keep the image proportion

Please try to reduce the size of your view page between the two miroir links bollow to see the behaviors

Example with Hubspot

Example of the result I want

We’ve tried some things with my developer :

"First, I tried to code a small CSS module in the “files and template” tab and then I simply added it to the email template.

The code in the module was just CSS:

<style>

body or class{

background-size:cover ;

}

</style>

This did not work properly.

After that I tried the same thing but with the image in the code with background-url. This didn’t work properly too.

I saw that Hubspot is telling me not to use CSS in the custom module. So, I tried uploading a CSS file to the “Files” tab and then tried adding it to the email files. That didn’t work either

Hope we’ll find a solution.

Waiting for your answer

Best

Lucas Djelloul

[Jaycee_Lewis]

Hey, @LDjelloul Thank you for the question. Let’s see if we can get the converstaion started. Hey, @Jnix284 @Sjardo @Anton, do you have any hard-earned email template customization advice?

Thank you for taking a look! — Jaycee

[LDjelloul]

Hey @Jaycee_Lewis

Do you think I will have a return soon?

Thank you for your help

Best

Lucas

[jnix284]

Hi @LDjelloul you are correct, it is not possible to add the CSS to the custom module or reference a CSS file for email.

This is a great guide for what CSS can be used for Email.

The link to your HubSpot example doesn’t work without a login, but based on your screenshot and the mailchimp example, it looks like you’re going to need to size the image relative to your content.

The background image in the mailchinp example is set to cover, it is just sized to be taller than the email content:

Hope this helps clear things up a bit!