Skip to main content
March 27, 2009
Question

PNG showing up with black background

  • March 27, 2009
  • 15 replies
  • 277993 views
All of a sudden my png images with transparent backgrounds are only showing up with black backgrounds in Captivate. I thought it was the photoshop at first but when I tried to pull old png images in that showed up fine before, the black background showed up. ANy ideas? Hopefully I am explaining this clearly.
This topic has been closed for replies.

15 replies

Participant
August 26, 2020

From Illustrator at 300 dpi, export to png and check "Use Artboards" that solved the problem for me 🙂

Participating Frequently
November 22, 2017

Open the file in Photoshop and resave making sure to turn off interlacing.

Participant
March 8, 2020

Or if turned of then turn on.

Participant
April 25, 2017

In my case same thing happened with Acrobat Pro. It was due to bit-depth. I increased it from 8 to 32 and now it works!

Participant
February 22, 2017

Had the same problem when importing .png into Illustrator. Solved it by exporting my file to PNG-24 instead of PNG-8.

Participant
August 4, 2016

I had the same problem. What fixed it for me was opening it in photoshop and making sure the color mode was set to RGB and not Indexed Color.

DomingoGS
Participant
November 21, 2015

Try double klicking on your "background" layer in your layers palette, to make it into a layer, layer 0 by default. You shouldn't have any proplems after that.

Hope it helps!

Mitch_sc
Participant
June 9, 2014

Solved:

1. Open in Photoshop

2. Image > Mode > RGB / CMYK

3. Save

Seems that Indexed Colors were causing the problem on my end.

Lilybiri
Legend
June 9, 2014

OMG who is still using Indexed Colors nowadays? They are only 8-bit. I abandoned them over 15years ago. Sorry, for the exclamation but you should have seen the question marks in my eyes!

TLCMediaDesign
Inspiring
June 9, 2014


I still use them extensively if I don't need the color depth. Not so much for Captivate but definitely in HTML pages.

June 14, 2011

I found solution where I was having the same problem on browsers.

Problem at my end:

I was creating a transparent png's with image editor for web but in internet browsers it was showing a black background instead of transparent background.

Solution as per:

I find problem in my css file. Please check 'img' class in css modify or delete. it will remove the background.


Cheers!

Arsalan

Participant
August 25, 2011

I am using Captivate 5. My .png files were not transparent in the web browser exports. The problem was in the properties of the image. Uncheck "Allow Smoothing" and the gradient transparencies all work. This also resolved an issue with transparent text captions that were placed on layers above the .png showing color flashes during transitions.

Inspiring
November 7, 2011

Make sure you have an empty layer below the cropped image before you save as a .png. Turn off the visibility of the layer below before you output. Do not use the "Save for web and devices feature, make sure you use File/Save as...

I'm assuming you're creating the image in PS.

Steve

Inspiring
August 11, 2010

I know this is an old thread, but I just came across this problem and found a different solution that I thought I would share just in case it helps someone else.

I used the same custom png button with a transparent background (made in fireworks) for more than 50 projects with no problem.  Suddenly, the black background (with a white border) that others mentioned appeared on the 56th project but only after it was published.  It all appeared fine in the workspace.  None of the solutions above would work.

my solution:  I just merged the image button into the background and then placed a transparent button over it to create the action that I needed.  Hope that helps someone in the future!

June 30, 2009

In my experience, Captivate 3 seems to interpret the transparency in an image as black if the file size is large.  It seems to happen in the resizing compression.  There are two ways I have found to overcome this:

1.       The most effective is to reduce the file size to less than 100kb.  For most Captivate projects this still offers a good quality resolution in PNG format.

2.       Using PhotoShop, lock the transparency then save the file again.  If the save was previously interlaced then choose the opposite (none) this time – reverse if interlaced previously.  Then reimport the file.  This is not always effective but for some quirky reason, sometimes it works.  It will not work with very large files but seems to work with stubborn smaller PNG files, where Captivate is interpreting transparency as black.

I hope this is of assistance to you.

Participant
July 7, 2009

The solution I've found is to just ensure that the image you're importing is smaller than the slide size. If Captivate has to resize or crop your image it (for some reason) interprets transparent space as black. Just resize the image to have a width and height less than that of the slide before importing and all should be well.