DEV Community

Cover image for How to remove background of an image with CSS
Madhu Saini
Madhu Saini

Posted on

113 8 11 4 8

How to remove background of an image with CSS

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>


Enter fullscreen mode Exit fullscreen mode

Image

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>


Enter fullscreen mode Exit fullscreen mode

Image

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๐ŸŒป

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (65)

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข โ€ข 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...

Multiply Firefox logo with orange background

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

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

Collapse
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ โ€ข โ€ข 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" ๐Ÿ˜…

Thread Thread
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข

Thanks for explaining it in more detail ๐Ÿ‘. I didn't have the time for a longer post.

Thread Thread
 
joelbonetr profile image
JoelBonetR ๐Ÿฅ‡ โ€ข โ€ข Edited

No problemo Jon, you've done it tones of times already ๐Ÿ˜

Collapse
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข โ€ข Edited

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

Thread Thread
 
madhusaini22 profile image
Madhu Saini โ€ข

"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

Thread Thread
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข

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

Thread Thread
 
ngdangtu profile image
ฤฤƒng Tรบ โ€ข โ€ข 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.

Thread Thread
 
link2twenty profile image
Andrew Bone โ€ข โ€ข 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.

unmodified

Thread Thread
 
madhusaini22 profile image
Madhu Saini โ€ข

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

Thread Thread
 
jonrandy profile image
Jon Randy ๐ŸŽ–๏ธ โ€ข

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

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

Blend mode multiply

Collapse
 
darkwiiplayer profile image
๐’ŽWii ๐Ÿณ๏ธโ€โšง๏ธ โ€ข

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.

Collapse
 
anitaolsen profile image
Anita Olsen โ€ข

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! โœจ

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

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

Glad you loved my post!!

Collapse
 
sh20raj profile image
Sh Raj โ€ข

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

Collapse
 
sh20raj profile image
Sh Raj โ€ข

And more you can do Code Highlighting to your post

<style>
        html {
            background: #fbd290;
        }
        img {
            width: 100px;
            mix-blend-mode: multiply;
        }
    </style>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

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

Thread Thread
 
sh20raj profile image
Sh Raj โ€ข

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.

favicon 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 โ™ฅ๏ธ

Thread Thread
 
sh20raj profile image
Sh Raj โ€ข

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 ๐Ÿค”

Thread Thread
 
madhusaini22 profile image
Madhu Saini โ€ข

gonna definitely checkout your recent article :)

 
madhusaini22 profile image
Madhu Saini โ€ข

yes, dev's community really very supportive!

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

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

Yes, I've learned from there only :)

Collapse
 
sh20raj profile image
Sh Raj โ€ข

I got it ๐Ÿ˜Šโ™ฅ๏ธ

Collapse
 
anitaolsen profile image
Anita Olsen โ€ข

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

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

Thanks for the lovely feedback :)

Collapse
 
darkwiiplayer profile image
๐’ŽWii ๐Ÿณ๏ธโ€โšง๏ธ โ€ข

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.

Collapse
 
dlaravindgoud profile image
Aravind โ€ข โ€ข Edited

I had no idea CSS allows this and with this level of ease. Thanks for sharing ๐Ÿ‘.

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

yes, it does!

Thanks for the feedback :)

Collapse
 
sh20raj profile image
Sh Raj โ€ข

This article is in Google feeds ๐Ÿซก

Image description

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

haha, I can't belive this๐Ÿ˜‚
Thank you so much for letting me know, this made my day!!

Collapse
 
sh20raj profile image
Sh Raj โ€ข

Sure, I will do it again someday mb ;)

Thread Thread
 
madhusaini22 profile image
Madhu Saini โ€ข

Thanks

Thread Thread
 
sh20raj profile image
Sh Raj โ€ข

๐Ÿ˜‡

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

Even I can see that now <3
Image description

Collapse
 
notne profile image
Sameer โ€ข

Very Helpful

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

Thanks :)

Collapse
 
garrett profile image
Garrett / G66 โ€ข

I had no idea this was possible. Thank you!

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

Even I learned it two days before, Hope it will help you :)

Collapse
 
nadiafedev profile image
Nadia โ€ข

What kind of magic is this! ๐Ÿ™€
Thank you!

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

Glad it helped, Thanks Nadia!

Collapse
 
mauronava_dev profile image
Mauro Nava โ€ข

Thank you!!!

Collapse
 
madhusaini22 profile image
Madhu Saini โ€ข

My pleasure :)

Hope it helped!

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

๐Ÿ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay