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>

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🌻

Blog

How to remove background of an image with CSS

Madhu Saini

Introduction

Understanding the CSS Property

Setting Up Your HTML Document

Join Our Newsletter. No Spam, Only the good stuff.

Related