How to do dynamic background image,

Plasmic Studio Questions
1

Hey, does anyone knows how to attach background images dynamically like opening a movie page with the relevant poster in background image.

Have tried adding html style attribute, but it seems i can’t get the json format right, is it like this.

{
“background”: {
“type”: “style”,
“style”: {
“backgroundImage”: “url(‘https://example.com’)”,
“backgroundSize”: “cover”,
“backgroundPosition”: “center”,
“backgroundRepeat”: “no-repeat”
}
}
}

More info: have also tried doing a preview, but it still doesn’t attach the image, if there’s another way please do tell.

2

A better solution might be to use an actual image element, and place your content over it by placing both as children of a grid element, with both set to occupy the first column position so that they overlap.

But you can also set the style to something like (watch out for the smart quote chars here)

{
“backgroundImage”: “url(‘https://example.com’)”,
“backgroundSize”: “cover”,
“backgroundPosition”: “center”,
“backgroundRepeat”: “no-repeat”
}
1 Like