Use dynamic background image on a div

Hi I want to use a dynamic value for a background image. i am trying to use something like this with no success

dmx-style:background-image="/images/activities_main/{{geActivityData.data.query1[0].activity_file}}"

It does not even renders on the code

Any ideas?
Thank you!

Hi Niko,
The syntax for background images is:

background-image: url('your/url/image.jpg');

Yes tried it too

dmx-style:background-image:url="images/activities_main/{{geActivityData.data.query1[0].activity_file}}"

I dont know if the issue is that I am already using an inline style. Check code

 <div class="header-image" style="height: 630px;" dmx-style:background-image:url="images/activities_main/{{geActivityData.data.query1[0].activity_file}}">
    <div class="banner_content_box">
      <!--h3>Go explore your world!</h3-->
    </div>
  </div>

Niko, that is not the right syntax … the url should not be placed there:

dmx-style:background-image=“url(‘your/url/image.jpg’)”

Well now it does render in the code but it adds double quotes inside the url(), even if in the code I have placed it inside single quotes

 <div class="header-image" style="height: 630px; background-image: url(&quot;images/activities_main/trainingActivity.png&quot;);">
        <div class="banner_content_box">
         
        </div>
      </div>

I don’t think this is an issue. Can you send me a link to your page?

Oh my yes this was not the issue. Was testing the admin localy while the front on the remote. So the image was uploaded in local folder :slight_smile:
Uploaded image on remote and works!

Thank you very much Teo!

1 Like