How to add images with transparent backgrounds on buttons?

429
8
Jump to solution
09-23-2021 06:36 PM
Hayley
by
New Contributor III

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?

HayleyLam_1-1632447331191.png

HayleyLam_2-1632447348404.png

 

 

0 Kudos
1 Solution

Accepted Solutions
jcarlson
MVP Frequent Contributor

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.

- Josh Carlson
Kendall County GIS

View solution in original post

8 Replies
jcarlson
MVP Frequent Contributor

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

- Josh Carlson
Kendall County GIS
Hayley
by
New Contributor III

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

0 Kudos
jcarlson
MVP Frequent Contributor

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.

- Josh Carlson
Kendall County GIS

View solution in original post

Hayley
by
New Contributor III

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

HayleyLam_0-1634261253417.png

 

 

0 Kudos
jcarlson
MVP Frequent Contributor

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.

- Josh Carlson
Kendall County GIS
0 Kudos
CourtneyMenikheim
Occasional Contributor

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

Courtney Menikheim | Application Developer | @thecmenikheim
0 Kudos
Hayley
by
New Contributor III

Hi, I have attached the image I am using

0 Kudos
TonghuiMing
Esri Contributor

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

TonghuiMing_0-1634283367119.png

 

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,

0 Kudos