Use dynamic background image on a div

Wappler General Need Help
1

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!

2

Hi Niko,
The syntax for background images is:

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

3

Yes tried it too

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

4

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>
5

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

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

6

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>
7

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

8

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