Madhu Saini

Posted on Apr 3

How to remove background of an image with CSS

#webdev #css #html #programming

Introduction

Have you ever wanted to make the background of an image vanish on your website? Well, you're in luck! With just one line of CSS code, you can achieve this effect without the need for any fancy software or complex tools. In this beginner-friendly guide, we'll walk through the steps to remove the background of an image using CSS.

Understanding the CSS Property

The magic lies in the mix-blend-mode CSS property. This property allows you to specify how an element's content should blend with the content of its parent element or the element behind it. By setting mix-blend-mode: multiply;, we can remove the background of an image and make it transparent.

Setting Up Your HTML Document

This is my html code, as you can see my image have a write background and my html body have some other background color and I need to remove this white background and wanted to make it transparent.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
        }
    </style>
</head>
<body>
    <img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>

Now, if I want to remove the background of the image, I can simply add only one line of code and that's mix-blend-mode: multiply;.
You can also add it to your image add check if that works for you or not.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
            mix-blend-mode: multiply;
        }
    </style>
</head>
<body>
    <img src="https://imgs.search.brave.com/iJNo3veLLwFpWBBM6WXpt5KFo9QvGK3suMKw_U-w3s0/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtcGxhdGZvcm0u/OTlzdGF0aWMuY29t/Ly9pQmVCUlZzak5L/d2gzbWlJTGctTnps/S21EVVk9LzB4MDoy/MDAweDIwMDAvZml0/LWluLzUwMHg1MDAv/cHJvamVjdHMtZmls/ZXMvMTIxLzEyMTI5/LzEyMTI5ODMvODdj/YjIyMmUtZTU4Ni00/NmNiLTg1NmQtNzI1/ZmY4ZjgxZmVlLnBu/Zw" />
</body>
</html>

And that's it! With just one simple lines of CSS, you can effortlessly remove the background of an image on your webpage. Give it a try and see the magic happen! Happy coding!

If you liked this blog, please share it with others who might find it useful. You can also keep up with me for more stuff about JavaScript, React, Next.js, & Web Development.

You can find me on Twitter, LinkedIn, and GitHub.

Thanks for reading🌻

Top comments (65)

Jon Randy 🎖️ • Apr 4 • Edited

This does not do what you think it does at all. It does not remove the background. Try it with a coloured image - the colours will be ruined.

The page at MDN gives a nice example of the different blend modes. You can see how multiply affects way more than just the background...

Madhu Saini • Apr 4

It does work for almost 80% of images but yeah sometimes it does not work.

JoelBonetR 🥇 • Apr 4 • Edited

It affects the whole image, not just the background.

It has the illusion of "removing the background" in your example because it's a pure black thingy with high contrast... Now change the color of the black thingy to be a gradient from cian to green over an orange background and try again, you'll see what people is trying to tell you.

Color layer multiplication works by multiplying the colors of the blending layer and the base layer, always resulting in a darker color (Here's the reason your example seems to work).

More deeply it takes the RGB channel values from 0 to 1 of each pixel in the top layer and multiplies them with the values for the corresponding pixel from the bottom layer

It's useful for colouring shadows but i no way "removes the background of an image" 😅

Jon Randy 🎖️ • Apr 4

Thanks for explaining it in more detail 👍. I didn't have the time for a longer post.

JoelBonetR 🥇 • Apr 4 • Edited

No problemo Jon, you've done it tones of times already 😁

Jon Randy 🎖️ • Apr 4 • Edited

It's not that it does or doesn't work - it simply isn't what the 'multiply' blend mode does.

Madhu Saini • Apr 4

"mix-blend-mode" specifies how an element's content should blend with its background or with the content of the elements behind it. And multiply value is one of the blend modes available. And that's what we want

Jon Randy 🎖️ • Apr 4

But it doesn't remove the background - that's entirely incorrect

Đăng Tú • Apr 4 • Edited

I agree with you. The fact of the image that lost the white background is just purely visually. The white bg is still there, it just got replace with other color. In short, the result image won't be able to serve any function of a transparent bg.

I would choose a more careful title like: "Replacing white bg of a black & white photo with another color"

This will make the post more useful.

Andrew Bone • Apr 4 • Edited

What @jonrandy is trying to point out it that it's got nothing to do with replacing a background. All colours in the original image have been modified.

Multiple takes each pixel from the blend-mode'd image and the pixel directly below it then takes the colour as an RGB where each colour channel is a float between 0 and 1. Then it multiplies R * R, G * G and B * B.

This can be useful but advertising it as removing a background can be damaging for people that will believe this as face value.

Here's how some images will turn out. Were I to believe the post I would expect the black to be removed and nothing else to change.

Madhu Saini • Apr 4

this will not just replace white bg of black & white photo, please try some colorful stuff as well

Jon Randy 🎖️ • Apr 4

If you have these two images (colourful background, and a foreground image with a white background):

And you use the multiply blend mode, you will end up with this:

𒎏Wii 🏳️‍⚧️ • Apr 5

if 80% of all images are black and white, and 100% of your backgrounds are white, then it would work, yes.

Out in the real world, this is rarely, if ever, a working way of removing backgrounds from anything.

Anita Olsen • Apr 4

If I may, I am not sure the title of your post is in proper English? What if you wrote the following instead: "How to remove the background of an image with CSS".

I hope this helped 🤗

I love your post so much! ✨

Madhu Saini • Apr 4

haha, yeh you're right I've some minor grammatical error, I'll edit it :)

Glad you loved my post!!

Sh Raj • Apr 4

I have seen same thing in ezsnippet video, is it from there....

Sh Raj • Apr 4

And more you can do Code Highlighting to your post

<style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
            mix-blend-mode: multiply;
        }
    </style>

Madhu Saini • Apr 4

Yeah, actually I've just started writing here like 2 days before😂, before that I used to write on Hashnode. So, I'm not so handy with dev's features

Sh Raj • Apr 4

Hope you are finding much audiance and better community to interact. 😊

I loved ♥️ this article

How to make Next.js app a PWA( Progressive Web App)

Learn, how you can build your first next.js app a Progressive Web App.

madhusaini22.hashnode.dev

Hoping more useful articles on NextJS ♥️ from you 😃

** 💡 Tip **
You can checkout my previous articles to know more dev community features 😎😊

Thanks ♥️

Sh Raj • Apr 4

And I'm writing since a long time here and you such huge response on your startup article 👍
I never got this much response on a single article.... 💯

PS :- Felling Little Jelious 🤔

Madhu Saini • Apr 4

gonna definitely checkout your recent article :)

Madhu Saini • Apr 4

yes, dev's community really very supportive!

Thanks Raj, you loved my blog post and yes will keep sharing quality NextJs articles :)

Madhu Saini • Apr 4

Yes, I've learned from there only :)

Sh Raj • Apr 4

I got it 😊♥️

Anita Olsen • Apr 4

This is totally awesome! I had no idea you could do this. Thank you so much for sharing with us!

Madhu Saini • Apr 4

Thanks for the lovely feedback :)

𒎏Wii 🏳️‍⚧️ • Apr 5

This only works with black and white images.

Any colours in the image will get distorted (the further they are from black, the stronger), and the background has to be 100% white, otherwise it will still distort the colour of the backdrop.

There is also a different blend mode that works for white on black images, but I forgot which one that was.