Hello! Welcome to CodeNest.
If you want to add free background remover tool on blogger website then this post is just for you.
Removing image backgrounds has never been easier! With this simple and professional Online Background Remover Tool, you can easily remove the background from any image in just seconds.
A background remover tool is a web-based utility that allows users to automatically remove the background from an image, usually leaving the main subject intact. It’s especially useful for e-commerce product images, profile pictures, social media content, or any project where you want a clean and professional look without any distractions in the background.
How It Works
This tool uses the powerful Remove.bg API behind the scenes. Remove.bg is an advanced AI service that detects the subject of your image and removes the background automatically, with high accuracy.
You can see the demo⤵
View DemoFeatures
- Upload JPG or PNG image (any size)
- Instantly process and remove background
- Shows both original and background removed previews
- One-click Free Download of transparent image (PNG)
- Fully responsive on mobile and desktop
- Your image is not saved – it's processed securely
How to Use
- Click on the Upload Image button.
- Select your JPG or PNG photo.
- Wait a few seconds while the AI removes the background.
- Click the Download button to save your new transparent image.
Powered by Remove.bg API
We’ve integrated remove.bg API to deliver fast, accurate results. You don’t need any software or skills — everything happens automatically in your browser!
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Pages.
Step 3: Either create a new page by clicking on icon or click on the existing page to add codes there.
Step 4: Switch to HTML view.
Step 5: Paste the following codes in it
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>BGXpert - Background Remover</title>
<style>
#mobile-menu,mobile-menu,.main-wrapper, mobile-menu,.breadcrumbs,.postTitle, .itm,footer, header,.headIn,.navIn,.navbar,.ntfC,.ancrCn{display:none}#qEdit.blog-admin.qEdit,.brdCmb,#backTop.toTopB.nBtm.vsbl,.mnBr,#notif-widget.section,.blogMn,.wvC,.adB,#LinkList001,.ancrC{display:none;}
#link a{text-decoration:none}
/*body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #f1f5f9;
color: #111827;
}*/
main {
padding: 30px 20px;
max-width: 1000px;
margin: auto;
text-align: center;
}
h2 {
margin-bottom: 20px;
font-size: 22px;
}
input[type="file"] {
display: none;
}
.upload-btn {
background: linear-gradient(to right, #3b82f6, #2563eb);
color: white;
padding: 12px 24px;
font-weight: bold;
font-size: 16px;
border: none;
border-radius: 12px;
cursor: pointer;
margin: 10px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.upload-btn:hover {
opacity: 0.9;
transform: scale(1.03);
}
#loading {
display: none;
margin-top: 20px;
font-weight: bold;
}
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
margin-top: 30px;
}
.image-box {
flex: 1 1 300px;
text-align: center;
}
.image-box img {
width: 100%;
max-width: 300px;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.download-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 20px auto 0;
padding: 12px 24px;
background: linear-gradient(to right, #16a34a, #15803d);
color: #fff;
border-radius: 10px;
text-decoration: none;
font-size: 15px;
font-weight: bold;
text-align: center;
}
.download-container {
text-align: center;
}
.download-btn:hover {
opacity: 0.9;
}
/*footer {
text-align: center;
padding: 20px;
background: #111827;
color: #fff;
margin-top: 50px;
}*/
@media (max-width: 768px) {
.image-grid {
flex-direction: column;
align-items: center;
}
}
.btn-icon {
width: 18px;
height: 18px;
}
</style>
</head>
<body>
<main>
<h2><span style="color: #2b00fe; font-size: x-large;">Professional Background Remover</span></h2>
<h2>Upload any image (JPG, PNG) to remove background</h2>
<label class="upload-btn" for="fileInput">
<!-- Upload SVG -->
<svg class="btn-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12V4m0 0L8 8m4-4l4 4"/>
</svg>
Upload Image
</label>
<input type="file" id="fileInput" accept="image/*">
<div id="loading">Processing image, please wait...</div>
<div class="image-grid" id="result"></div>
</main>
<footer>
<p>© 2025 BGXpert - All Rights Reserved</p>
</footer>
<script>
const fileInput = document.getElementById('fileInput');
const loading = document.getElementById('loading');
const result = document.getElementById('result');
const API_KEY = 'YOUR_REMOVE_BG_API_KEY'; // Replace with your own
fileInput.addEventListener('change', async () => {
const file = fileInput.files[0];
if (!file) return;
result.innerHTML = '';
loading.style.display = 'block';
const originalImgURL = URL.createObjectURL(file);
const formData = new FormData();
formData.append('image_file', file);
formData.append('size', 'auto');
const response = await fetch('https://api.remove.bg/v1.0/removebg', {
method: 'POST',
headers: {
'X-Api-Key': API_KEY
},
body: formData
});
const blob = await response.blob();
loading.style.display = 'none';
if (blob.type.startsWith('image')) {
const removedImgURL = URL.createObjectURL(blob);
result.innerHTML = `
<div class="image-box">
<h3>Original Image</h3>
<img src="${originalImgURL}" alt="Original" />
</div>
<div class="image-box">
<h3>Without Background</h3>
<img src="${removedImgURL}" alt="No Background" />
</enter><div class="download-container">
<a href="${removedImgURL}" download="no-bg.png" class="download-btn">
<!-- Download SVG -->
<svg class="btn-icon" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1M12 12V4m0 8l-4-4m4 4l4-4" />
</svg>
Free Download
</a>
</div>
</div></center>
`;
} else {
result.innerHTML = `<p style="color:red;">Error: Background removal failed.</p>`;
}
});
</script>
</body>
</html>Step 6: Go to remove.bg
Step 7: Sign up and get your API key.
Step 8: Replace this line in the code.
const API_KEY = 'YOUR_REMOVE_BG_API_KEY'; // Replace with your own
const API_KEY = 'pPrZrbWLgKKg8LgupBksLkt4'; // Replace with your own
Step 9: Save or Publish
That's done!
Get your remove.bg API key? – Watch now!
Conclusion
This tool makes background removal super easy and fast. Just upload an image, and download the transparent version in seconds no editing skills needed.
Perfect for blogs, websites, and personal use. Add it to your site in minutes and let your users enjoy it for free!
Chat Max All 💬 : https://chat-max-all.blogspot.com
If you are facing any problem, don't hesitate.
#vivekgyan7 #vivekgyan70
.png)
