cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

Black background on transparent images

Jump to solution

I'm using a button where the type is set to an image. Purpose of the button is to open a modular that gives more information on a category. The image is a .png and has a transparent background. I've also tried to use an image with a white background to match my form. Every time I use either images, SharePoint makes the background black. Does anyone know how to fix this?

Labels: (2)
Tags (1)
0 Kudos
Reply
7 Replies
Workflow Hero

Re: Black background on transparent images

Jump to solution

That's a classic problem. Just need to make sure the image is saved in the right byte value and not a jpg. But if you can't get passed it. There are other ways to provide this feature. You can have a label control with a client click JavaScript function called and also apply a background image via CSS when a CSS class is provided for the label. By using CSS, you can use the SharePoint stock image for information and not have to use an uploaded image, or continue to use an uploaded image. So there are other options if this take up too much time solving. 

Reply
Workflow Hero

Re: Black background on transparent images

Jump to solution

Thanks for the reply! I actually looked into using a label and CSS to display an icon. Couldn't get it to work properly. Are you able to use client click on just a label? I don't see any JavaScript options in the label control's properties; or is it added in the HTML portion of the label? I'm on O365. Thanks!

0 Kudos
Reply
Workflow Hero

Re: Black background on transparent images

Jump to solution

That's right, you can't store Client ID's on a label, but you can for input controls. It is possible to use the CSS class with Jquery to select the element and add a click event. But maybe that just adding too much complexity. 

Reply
Workflow Hero

Re: Black background on transparent images

Jump to solution

Ok, so I added a CSS class to an image button. Then in my custom CSS for the form I set the background color to transparent and it worked. 

I used 

.clearbutton {

background-color: transparent !important;

}

I noticed I could change the background color to the button in the ribbon and the transparent area would show the color I selected. So it was working "transparently", but the issue was that I could not default the background color to transparent. I needed this extra css to solve it. 

0 Kudos
Reply
Workflow Hero

Re: Black background on transparent images

Jump to solution

0 Kudos
Reply
Workflow Hero

Re: Black background on transparent images

Jump to solution

I actually ended up recreating the icon to match the background color of the form. That ended up working. When I initially tried that, I didn't remove the alpha channels that give the png transparency. Once I removed them and combined layers it worked. Thanks Andrew!

0 Kudos
Reply
Workflow Hero

Re: Black background on transparent images

Jump to solution

Wow! Why didn't I think of that!? This worked! Thanks! Much easier.

Reply