Component container background images don't display when empty

Beta
#1

Hey there, I was wondering if this might be able to be fixed in the new release? I posted a while back about how background images in a custom component act strangely in CS when a background image is applied. The default CS elements show a preview of the bg image in the builder but a custom component of the same container element needs another element to be placed inside in order for the bg image to be previewed in the builder. Without the element placed inside, the bg image will not preview like the default CS element does.

Original post here:

Thanks!

#2

Can you export that page in question for me to look at? I could not recreate when I tried to go off of the explanation. I remember seeing a lot of custom CSS on that page and think it might be related. Have a great day.

image

#3

Hey Charlie, I just recreated a simpler version of the issue away from my more complex custom component. Here’s a screen share of me demoing the issue, where you can see that it works on the Component side, but the instance on a page is where you see the issue, notice that when I delete the text element the bg image stays for a sec at full preview size then disappears: https://monosnap.com/file/sGbCUbkjS1xJKnNSXgjLvxjy162paO

For whatever reason, the export button in my inspector isn’t doing anything at all when I click it. But I can on a different site… any idea why that might be?

Anyway, I will put a link to it in a secure note for now.

#4

oh and here are the params I’m using:

{
“bg”: {
“type”: “group”,
“label”: “Background”,
“noPicker”: true,
“params”: {
“bgImg”: {
“type”: “group”,
“label”: “Image”,
“noPicker”: true,
“params”: {
“enable”: {
“type”: “choose”,
“label”: “Image Enable”,
“initial”: “none”,
“isVar”: true,
“options”: [
{ “value”: “image”, “label”: “On” },
{ “value”: “none”, “label”: “Off” }
]
},
“img”: {
“label”: “Background Image”,
“type”: “image”,
“initial”: “”,
“when”: “not(eq($.bg.bgImg.enable, ‘none’))”,
“height”: 4
},
“parallax”: {
“type”: “choose”,
“label”: “Parallax”,
“isVar”: true,
“when”: “not(eq($.bg.bgImg.enable, ‘none’))”,
“options”: [
{ “value”: true, “label”: “On” },
{ “value”: false, “label”: “Off” }
]
},
“position”: {
“label”: “Image Position”,
“type”: “dimension”,
“isVar”: true,
“initial”: “50%”,
“when”: “not(eq($.bg.bgImg.enable, ‘none’))”,
“units”: ["%"],
“ranges”: {
“%”: { “min”: 0, “max”: 100, “step”: 1 }
}
},
“opacity”: {
“label”: “Image Opacity”,
“type”: “opacity”,
“isVar”: true,
“initial”: “1”,
“when”: “not(eq($.bg.bgImg.enable, ‘none’))”,
“ranges”: {
“unitless”: { “min”: 0.1, “max”: 1, “step”: 0.01 }
}
}
}
},
“bgColor”: {
“type”: “group”,
“label”: “Color”,
“noPicker”: true,
“params”: {
“color”: {
“type”: “color”,
“label”: “Background Color”,
“isVar”: true,
“initial”: “transparent”
}
}
}
}
}
}

#5

I appreciate the notes. I’m able to recreate it now, I’ll try to get it fixed during the beta. Have a great day