Problem with HubL image module

[jonlcrow]

I am trying to use an image module as the background of a div, so that I can change the image in the wysiwyg editor.

I have the code set up as 

<section style="width:100%; height:960px;background:url({% image 'Hero_image' label='Hero Image', alt='Hero Image', src="../hero-1600x960.png" %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">

 What I get is the image followed by 

'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">

Is the second curly bracket causing a problem? Do I need to do something with **bleep** characters? Is there another way to do this? Any other thoughts?

Thanks,

Jonathan 

[benvanlooy · Accepted solution]

Image renders an image tag, which you don't need..

You only want to render an image url, using:  image_src

so what you need is this:

<section style="width:100%; height:960px;background:url('{% image_src "image_src" src="-URL-to-image-placeholder.jpg", no_wrapper=True %}'); background-repeat: no-repeat; background-position: center; background-size:cover; background-attachment: scroll;">

More info?
https://designers.hubspot.com/docs/hubl/hubl-supported-modules#image-src

[jonlcrow]

Thanks. Worked perfectly!

[jonlcrow]

Actually - let me take that back. It worked to get the image styled correctly. But when I edit the page I can't use the widget to change the image.

Whatever image I change it to it still shows the original image.

[benvanlooy]

And you're sure that:

- you saved and published before leaving the page?

- that it's  not a caching issue? (check the page in an incognito tab)