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

user_15355674 0
Viewed 1126

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>
background-color transparency css html
4 Answers

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.

user_56416690

You need to use a PNG with a transparent background. otherwise you'll have a white background if you use a JPG.

user_52032750

According to this answer it's possible if the background is white.

Here is a sample code:

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

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

.spot-image {
    height: 110px;
    width: 110px;
    mix-blend-mode: multiply;
}
<div class="spot dark-spot">
        <img class="img-fluid spot-image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAe1BMVEX///8AAAD8/PwFBQX5+fnLy8u+vr4ICAiqqqq6urrk5OTf39+QkJBqamrS0tL19fU2NjaYmJgmJiZiYmKlpaVZWVmKiopAQEDs7OxGRkbY2Nizs7MrKyuBgYHExMSfn58bGxsTExN5eXlQUFAoKChxcXFcXFx8fHwZGRkM760UAAAEoElEQVR4nO3aa2OaOhjA8VxQrFrRWi/V1tr2uLPv/wmXC2ASkO3FCt32/704beMDJw9JHghOCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPyBlFL1f/9S6jAeFeIvzvD4LI2XYuh+fBIlXmRpLFQWfaTM6B4n42nYrlQ6ncMW83N2Go/2IpwRWabqyM9JottrmV8u5UREPVBq4kZXPlbt8Y8otvw5WrojnsZBkMmruHt8PR6GWQbTagRzbVMMFRsptZamfVRHT+bb1SI+w+Lu7jQrfx9XZ5Pra4ASK9/2EJ+/J2ubQe1Yz65MFQ9184dvURf/53JkZp7ws27/IetxVqI+QptjfIk2h23q5m3b+H+uvQwyNL/N6pmoPuwAlvauZeNbzHyeC3+DEfuH8kD5bppO17Npuapi3u0RZdi09xTH4RCa/j/XHViZP+vPprZlIvPcZahzMxi+98/V8Vqe7JrW11NJN3WV/V/ouvGx9wy3MvFe1sZD2Hh23VoG10K+mrjsWodNy0WIeXSqnZvG2Vty+l7zU+I+zdBUFXuXEJtqaln3NngaBJnRWJigUXjgf6KqKFXOE3uqOOtL7xm+J/lpeXYlYxQsQinvbPAhmNBmti5N1C489GzncXQqWbiFHpr3nuE4ysTZ2iv/Ebbk7pa9SOJW8SK2s3SUhJixv48W+vW+0x8p0wzlIc3G1/hZEqazXVSHJ/FEdhaz8Aqa3/p+qlFh+asthbhEDb7EJ/PN3PHi8T+46xV7SmIuAzzfZ+e0V1q+7KM/N2XoMo2MPNiuPzWvV2TR1ZXPcmxkmMtlWEjrtfOSRkbcHXLeGeKfjfqmzHWP5fZZNBiKpyo0rSMxd38/dY/haZgMpy3FJlQNoVLnZuH1TPO6ba1GMbl9VB0iQ3tP7sqw7pa7ed/I0A6PC9u1fl5ehcVQGXaXELOPqDIsbl+KZblFvL0QtfyW7LB7NPO7w9ZuRcVhG1WgMKwqkuljQWg/QGqeMvX0Rob+Lle7uczu63M930xw1X9mlUzFz1atXfdW7VH18KjmZqWyHPhd3q6lTNqGffzmxizZRlwe7foOrdcq3FsPpHX+6XQrkJl11sjQbTOu76jObSn6/eQQiVXS7VJ14ZP3fzduLYdrhqrtQdfYfIF36pNGz7TfFyZ2jbht9HnRHMBcnvdDp2c1b2WbtrDGI9BzEfe+UWu0G+Vecuikki2TLB81G2GnJOok4vt4Y0nbSpQNda8PmIu8CbvlikNr5GPU+6fGeebRrtf8/vL5vf8lSgSvbqMKmVqFYY0tn1Jv8aPPevAa47nXt+Eozm49RkbvzxprVUXzWLtB/hoZCteRezevtHt322Eiq/fFh7aPVzLP7TDqXLeXq8EoNwNdgmvRWRsWb36xpavQycS7/9SeJ/syAyj8N4Fuimn5VnTudDJRrN0sXLXNwOz6peRFfKkMveJ/Kd+mP49bfJMd37Sc7MuR7+Pf27XfRIn95BcSVPbbxMdbVcR+GXwcZ91TfSiutv+8Z93/guMf+PcdAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/4ofOSYkVPMxp9cAAAAASUVORK5CYII=">
</div>

user_124152870

You can kind-of do this using CSS mix-blend-mode: multiply. This will "remove" any white color (making it transparent) and will also affect any bright pixels which also with the same transparency, so the closer the pixel color is to white, the more transparent it will be.

body{
  height: 100vh;
  background: linear-gradient(salmon, lightgreen) no-repeat;
}

.piece{
  background: url(https://www.baytree-interiors.co.uk/_uploads/img/products/giant/aged-stone-outdoor-queen-chess-piece-ornament_19661.jpg) 0 0 / 100% 100% no-repeat;
  height: 200px;
  width: 180px;
}

input:checked ~ .piece{
 mix-blend-mode: multiply;
}
<input type='checkbox' id='remove-bg'>
<label for='remove-bg'>Remove chess piece white background</label>
<div class='piece'></div>

I suggest you to get board pieces images which are in APNG format, which already allows an alpha channel. I guess you can find plenty such APNG chess pieces files online.

user_1043800
Related