Custom Module for Background Image?

[lisaellington]

Is there a standard for custom modules for background images? I have a custom module that works perfectly with one template and not another (with very little variation between the two) and I have no idea why it won't work.

Here's my code for my custom module:

<style>
.main-image  {
    background: url('{{ widget.header_image.src }}');
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-position: center top !important;
}
</style>

Then I'm calling that style in the group in which I want it to appear. 

Is there something that is more standard or better?

Thanks for the help!

Lisa

[suniltodkar]

I have one question where you put this code? Can you tell me. Because i am new in hubspot.

[ndwilliams3]

One issue:  widget_data.header_image.src not widget.header_image.src

That should fix it.

<style>
.main-image  {
    background: url('{{ widget_data.header_image.src }}');
    background-size: 100% auto;
    background-repeat:no-repeat;
    background-position: center top !important;
}
</style>

[lisaellington]

Hmm.. that didn't help and when I copy the snippet, data isn't in there 😞

I just don't understand why this would work with one template and not another. It makes no sense to me.

[lisaellington · Accepted solution]

I fixed this. Want to know how? I deleted the module and added it back.

Sometimes these hubspot templates are still buggy.