I have one image that image background is white, In my webpage, The background color is #ebf5fc; when I insert the image it's not fit correctly, so what I need is the inserted image should be a transparent with background and the width should be 100%, please help me to fix this issue.

* {
background:#ebf5fc;
}

.shape-images {
    width:100%;
    background: #ebf5fc;
}

<div class="shape-images">
    <img src="https://docs.google.com/uc?export=download&id=1ED93sN3oWFtp9fHkAzTLK8Qp0B9Etv4r" />
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If the background of the image is filled with white and not just "transparent" then this is kind of impossible. You cannot use css to alter the background colour of an image. You could alter the image using a magic wand or select tool in Photoshop and then input the image with a transparent background.

https://photopea.com

This is a great option if you do not have access to Photoshop. It's free and can do nearly all of the functions of Photoshop.

CodePudding user response：

removing a solid color background from an image in HTML is possible using an SVG filter, which can be applied to HTML content.

i wouldn't recommend you actually use this method, removing the background in GIMP or photoshop or whatever is probably how you should solve it, but it is possible.

.demo_table {
  background-color: lime;
}

.remove_white_bg {
  filter: url(#remove_white);
}

<svg height="0" style="position: absolute">
  <filter id="remove_white">
    <feColorMatrix type="matrix" in="SourceGraphic"
      values="1 0 0 0 0
              0 1 0 0 0
              0 0 1 0 0
             -1 -1 -1 2 0" />
  </filter>
</svg>

<table class="demo_table">
  <tr><th>original image</th><th>same image   filter</th></tr>
  <tr>
    <td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Adaxial_side._Leaves_of_trees_in_autumn.jpg/136px-Adaxial_side._Leaves_of_trees_in_autumn.jpg" /></td>
    <td><img class="remove_white_bg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Adaxial_side._Leaves_of_trees_in_autumn.jpg/136px-Adaxial_side._Leaves_of_trees_in_autumn.jpg" /></td>
  </tr>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

(see here for more info on how <feColorMatrix> works)