In CSS you can remove the white background color form your PNG image by using only one CSS property called mix-blend-mode. Below example:
If you want to remove white or any background color from an image, this CSS property is perfect for you. Additionally, it works on all image types, not just PNG.
And if you also want to see some more properties of mix-blend-mode you can check it out on w3 school, there are a lot more properties that I haven’t mentioned here.
Like you I also want to remove white background from my image, I use many CSS properties like background-color: transparent; else background-image: url(‘path/to/image.jpg’); and many more,
But nothing was working, so I searched on YouTube and found this method. It worked, so follow all the steps outlined below.
Step 1: Select image in CSS
The first step is to select the image in the CSS file, if your image is in a container then you select the main container of your image.
In the above example there is only container class inside the style sheet as you can see.
Step 2: Add this CSS property to image
After adding image in the CSS sheet now only add this CSS mix-blend-mode: multiply;
Here is an example:
mix–blend–mode: multiply;
}
Once you add it is done, now your PNG has no background color.
Step 3: Save the file, and check preview
Once you follow both the above steps now save the HTML and CSS files and preview it on your browser below, I have shared the before and after picture which you can see
Before Image:
After Image:
I hope this post helps you to remove white background color form your PNG image using CSS codes.
You may also wants to know: https://newbiecoding.com/how-to-change-font-in-html-without-css-2/
