Black background on transparent images

  • 15 November 2017
  • 7 replies
  • 4 views

Badge +9

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?


7 replies

Userlevel 7
Badge +17

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. 

Badge +9

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!

Userlevel 7
Badge +17

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. 

Userlevel 7
Badge +17

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. 

Userlevel 7
Badge +17

210728_pastedImage_1.png

210729_pastedImage_2.png

Badge +9

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!

Badge +9

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

Reply