Html Css How to remove black rectangle background from image : <p>I am getting below mention image <a href="https://i.stack.imgur.com/d1vah.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d1vah.png" alt="image with black rectangle background"></a></p>

<p>Below is html div which i am using </p>

<pre><code>&lt;div class="image-cropper"&gt;
                  &lt;img [src]="url" alt="..." class="img-thumbnail"&gt;
                &lt;/div&gt;
</code></pre>

<p>Below is css : </p>

<pre><code>.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}

img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}
</code></pre>

<p>How can i clip the black background or make it transparent? Please suggest.</p>
