topic Re: How to add images with transparent backgrounds on buttons? in ArcGIS Experience Builder Questions

How to add images with transparent backgrounds on buttons?

Hayley — Fri, 24 Sep 2021 01:38:16 GMT

I'm using an image with a transparent background, however uploaded into Experience Builder it turns into a white backgroud. Is there a way to work around this so it doesn't appear on the hover colour of my button?

Re: How to add images with transparent backgrounds on buttons?

jcarlson — Fri, 24 Sep 2021 13:18:35 GMT

It shouldn't be doing that. Can you confirm the file format of your icon? Certain formats do not support transparency.

Re: How to add images with transparent backgrounds on buttons?

Hayley — Sun, 26 Sep 2021 19:33:38 GMT

They are PNG screenshots, do they need to be jpg?

Re: How to add images with transparent backgrounds on buttons?

CourtneyMenikheim — Tue, 28 Sep 2021 20:50:43 GMT

Can you provide a link to the files, or add them in a comment?

Re: How to add images with transparent backgrounds on buttons?

jcarlson — Tue, 28 Sep 2021 20:57:18 GMT

No, a PNG should be able to do it. But you say they're screenshots? That will capture whatever is displaying on your screen, and a screenshot can't really pick up transparency. That would have to be done in an image editor.

I'd second @CourtneyMenikheim's request, could you upload the files you're using? You can attach them to a reply here.

Re: How to add images with transparent backgrounds on buttons?

Hayley — Fri, 15 Oct 2021 01:28:01 GMT

Hi, I have tried again with downloading transparent imagery, but still getting the same issue. I have uploaded the file I'm using

Re: How to add images with transparent backgrounds on buttons?

Hayley — Fri, 15 Oct 2021 01:28:43 GMT

Hi, I have attached the image I am using

Re: How to add images with transparent backgrounds on buttons?

TonghuiMing — Fri, 15 Oct 2021 07:42:50 GMT

@Hayley - Unfortunately I don't believe the image "pop test.png" has a transparent background - in fact, it seems to have the gridded canvas with it.

If you are using the images as background inside the button widget, then setting the Fill color for the background as transparent will do the trick. See the comparison when you change the fill from the default to transparent:

Another interesting thing is, I do wonder how you achieve the original setting to put an image inside a button as background but aligned to the bottom, or you used an Image widget to lay on top of the button widget?

Hope it helps,

Re: How to add images with transparent backgrounds on buttons?

jcarlson — Fri, 15 Oct 2021 13:02:46 GMT

Can you elaborate how exactly you are downloading these?

Also, you might consider downloading something like Inkscape and simply making your own icons, or using it to alter existing SVG files (provided they have the right license), and export to PNG.