how to set background image of a div whose value is coming from a dialog(image url) in sightly component AEM?

Question

I am working on a sightly component using AEM 6.1. I have a dialog from where I am getting an image url and I want to set that image as background of a div.

What I am doing is:

<div class="hero" style= "background-image:url('/content/dam/home/hero.jpg');" >

So, /content/dam/home/hero.jpg value is coming as dialog property

I am trying as..

<div class="hero" style= "background-image:url('${properties.bgimage}');" >

Its not working. How can I set the background image from the dialog property?

Answer 1

Sightly doesn't detect the context of expressions within style and scripts automatically. We need to provide it explicity.

<div class="hero" style="background-image:url('${properties.bgimage @ context='styleString'}');" >

More about Display Context here.