Custom background in Hubspot template

Question

I am building a template in Hubspot. I want to make a background image editable from the front end. I have seen this in a template but I am unable to find the option from the hubl reference.

Answer 1

Go in content -> Design manager in left page find "Custom Modules", click this. At the top right you can find the button "New custom module". click this. In popup click "Custom modules" and "create". Bottom left click on "Add new field" and "image", Fill this.

you'll find something like:

{{ widget.field_name.src }}

You could change it to:

<style>
    #[your-element-id] {
        background: url({{ widget.field_name.src }});
    }
</style>

Now you have the form, you just need to add in the template.

Answer 2

<element selector> {
    background-image: url({{ widget.field_name.src }});
}