How to remove white space around images in Drag and Drop content

Hi! I am trying to make a Drag and Drop page similiar to the Chess board example where the images that are dragged on to the board do not have a white sqaure around them. Like in the chess board example, all of the game pieces that you click to move on to the board only have the piece itself moving not an extra white sqaure around the piece. How do I do that? Every setting I've seemed to try still leaves a white sqaure being dragged with it around the image as that's how the image was saved. Is it a setting in the Drag and Drop H5P or something I have to do to the image itself before uploading (a certain format or way to make the background invisible except for the shape of the item itself)?

Thank you!

BV52's picture

Hi Tpn7893,

This is not an H5P setting/feature but instead it is the file format of the images, the author used a PNG file. PNG files lets you have an image that doesn't have an extra space. 

-BV

Thank you. That worked!

papi Jo's picture

Here's an example of a *.png image with a tranparent background.

I used this kind of images for instance in this drag & drop content.

Thank you! I was able to get it to work with that.