How to connect background image to dataset?

Ask the community
,
1

I have a Dynamic Items Page and I want a transparent background image, I first tried using an image, but later on found its transparency can’t be changed so I though of using a background image, I’m not able to connect to the dataset. If this is even possible, please can someone show me how to do it.

2

Hi Balaram,
It’s not yet possible to connect without code, but if you’re willing to write a few lines of code, the following should work.

To get it to work on your site, just change the word ’ pic ’ below to the name of the field in your collection where the image is stored.

$w.onReady(function () {
	$w("#dynamicDataset").onReady(function(){
		$w("Document").background.src = $w("#dynamicDataset").getCurrentItem().pic;
	})
});
3

Thanks a lot! However, it still isn’t transparent. How do I do that?

4

Hey
What do you mean by transparent background image? Do you mean a strip with opacity?

5

Sort of

6

You can add a strip with columns and then change background image on that column

7

You can do it at the page level too - set the opacity once in the editor and any change to image source should preserve the same opacity:

793×746 261 KB

8

The filler image (default) is transparent; however, when I change the image src, it isn’t transparent.

9

Hmmmf, that’s a bug. Thanks for the catch!

10

I see, do you know when it might get fixed?