Is there any way to remove background of the picture on the website?

Question

I have a picture of a chess piece. I want to put this picture on some background representing chessboard. Now when I put this picture I have this white background. Is there any way (using HTML, CSS or JavaScript) to remove white background from the picture and leave only the piece? Now it looks like that: picture.

CSS file:

.dark-spot{
    background-color: rgb(209, 139, 71);
}

.spot{
    height: 110px;
    width: 110px;
}

HTML file:

<div class="spot dark-spot">
    <img class="img-fluid" src="images/pieces/black-rook-square.jpg">
</div>

Answer 1

Apparently you are using JPG images. JPG images will contain color everywhere, i.e. every pixel in it will contain a certain color. To make it fit with the background, you'd have to edit the JPG and convert all white pixels to your background color.

But since you have two background colors, you need to convert all white pixels to be transparent instead of white. This isn't possible with the JPG image type, you'll need to convert these images to either PNG or GIF and then "erase" the white pixels, making them transparent that way. The result will be that your background image color (the chessboard) will be displayed ("come through") at the transparent positions.