How to Remove Background from image in CSS?
Last Updated :
16 May, 2025
In modern web design, over 85% of websites use background manipulation to enhance visual appeal and layering. CSS offers several ways to remove or hide image backgrounds, such as using transparency, clipping, or masking techniques. This article will cover the most effective and up-to-date methods to achieve clean, professional visuals using CSS.
There are multiple ways to remove or hide the image's background using CSS:
Transparent Background using background-color and opacity
In this approach, we remove the background by making it transparent. The opacity property in CSS can be used to adjust the transparency of the element, and when combined with the background-color: transparent, it can make the background invisible while also adjusting the transparency of the image or text inside the element. However, note that opacity affects the entire element, including the content, not just the background.
Syntax:
.element {
background-color: transparent;
opacity: 0.5;
}Example: In this example, we make the background of the div element transparent, and the image
inside it will also become the semi-transparent due to the applied opacity.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.image-container {
background-color: transparent;
opacity: 0.5;
}
</style>
<title>Transparent Background Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Transparent Background Example</h2>
<div class="image-container">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250430170023452531/AIImagegenerator.png"
alt="Transparent background image"
width="300">
</div>
</body>
</html>
Output: The background of the container will be invisible, and the image inside the container will have reduced the opacity, appearing the semi-transparent.
Output
Removing Background using clip-path Property
The clip-path property can allows you to define the shape that clips parts of the element. This technique can be especially useful when you want to create the complex visual effects by removing the portions of an image. We can clip out parts of the background and keep only the specific portion of the image in a custom shape.
Syntax:
.element {
clip-path: circle(50%); /* Clips the element into a circle with a 50% radius */
}Where:
- clip-path: This property can specifies the area to the display. Any part of the image outside this area can be hidden.
- circle(50%): The shape to clip out is the circle with a radius that covers 50% of the width and height of the element.
Example: In this example, we clip the image into the circular shape, effectively removing the background and only showing the part of the image that fits within the circle.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.image-container {
width: 300px;
height: 300px;
overflow: hidden;
/* Ensures that the image is clipped */
}
img {
width: 100%;
height: 100%;
clip-path: circle(50%);
/* Clips the image into a circle */
}
</style>
<title>Clip Path Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Clip Path Example</h2>
<div class="image-container">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250430170023452531/AIImagegenerator.png" alt="Clipped image">
</div>
</body>
</html>
Output: The image can be appear as the circular shape, with everything outside the circular are hidden.
Output
Setting the Background to none or transparent
This approach can be useful when you want to remove the background image or make the background color invisible. We can simply set the background or background-image property to the one to completely remove any background from the element. Alternatively, setting the background-color: transparent will make the background color invisible while leaving the content visible.
Syntax:
.element {
background: none; /* Removes any background image */
}Where:
- background: none: This CSS property can removes any existing background image from the element.
- background-color: transparent: This CSS property can makes the background color transparent, but the content of the element remains visible.
Example: In this example, we can remove the background from the div element directly entirely using the background: none.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.image-container {
background: none;
/* No background will be displayed */
}
</style>
<title>No Background Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="image-container">
<p>This container has no background!</p>
</div>
</body>
</html>
Output: The container will have no background color or image. The text inside will be visible on the pages default background.
Output
Using mask-image(For Transparent Masks)
If you need to mask an image, removing or hiding parts of it in a more complex way, you can use mask-image. For instance, you can use a transparent mask to hide the background areas of the image
Syntax:
selector {
mask-image: url('mask.png');
mask-mode: alpha; /* Optional - uses the alpha channel (transparency) by default */
mask-repeat: no-repeat;
mask-position: center;
mask-size: cover;
}
index.html
<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
-webkit-mask-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20250430165340564778/gfg-image.jpg');
mask-image: url('https://media.geeksforgeeks.org/wp-content/uploads/20250430165340564778/gfg-image.jpg');
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>The mask-image Property</h1>
<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250430170023452531/AIImagegenerator.png" alt="AIImage" width="600" height="400">
</div>
<h3>Original image:</h3>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250430170023452531/AIImagegenerator.png" alt="AIImage" width="600" height="400">
</body>
</html>
Using the filter: brightness(0)
The filter property in CSS can allows you to apply the graphical effects to the elements. When using the filter: brightness(0), we can make the image appear entirely black, which can be useful when you want to remove the visibility of the image without actually deleting the image source.
Syntax:
.element {
/* Sets the brightness of the image to 0, making it appear black */
filter: brightness(0);
}Example: In this example, the image will be displayed with the brightness level of the 0, making it completely black.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.image {
filter: brightness(0);
/* Makes the image completely black */
}
</style>
<title>Brightness Filter Example</title>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>Brightness Filter Example</h2>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20250430170023452531/AIImagegenerator.png" class="image"
alt="Image with filter applied">
</body>
</html>
Output: The image will appear completely black due to the brightness filter.
output