1. HTML (index.html)
Background Remover Tool
Best Free Background Remover Tool
Remove Image Background Instantly
---
2. CSS (styles.css)
/* General Styles */
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
/* Top Banner */
.top-banner {
background: #333;
color: white;
padding: 10px;
font-size: 18px;
}
/* Header */
header {
background: #007BFF;
color: white;
padding: 20px;
font-size: 24px;
}
/* Upload Section */
.upload-section {
margin: 20px;
}
.upload-btn {
background: #28a745;
color: white;
padding: 10px 20px;
cursor: pointer;
display: inline-block;
border-radius: 5px;
}
#uploadInput {
display: none;
}
/* Preview Section */
.preview-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 20px;
}
.image-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
}
.image-container img {
max-width: 250px;
height: auto;
border: 2px solid #ddd;
border-radius: 5px;
}
/* Button Section */
.button-section {
margin: 20px;
}
#removeBgBtn, .download-btn {
background: #ff4500;
color: white;
padding: 10px 15px;
margin: 10px;
border: none;
cursor: pointer;
border-radius: 5px;
text-decoration: none;
}
.download-btn {
background: #17a2b8;
}
/* Footer */
footer {
background: #222;
color: white;
padding: 10px;
position: fixed;
width: 100%;
bottom: 0;
}
/* Responsive Design */
@media (max-width: 600px) {
.image-container img {
max-width: 100%;
}
}
---
3. JavaScript (script.js)
document.getElementById("uploadInput").addEventListener("change", function(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
document.getElementById("originalImage").src = e.target.result;
};
reader.readAsDataURL(file);
}
});
document.getElementById("removeBgBtn").addEventListener("click", function() {
const image = document.getElementById("originalImage").src;
if (!image) {
alert("Please upload an image first.");
return;
}
const apiKey = "YOUR_REMOVE_BG_API_KEY"; // Replace with your API key
const formData = new FormData();
formData.append("image_file", document.getElementById("uploadInput").files[0]);
formData.append("size", "auto");
fetch("https://api.remove.bg/v1.0/removebg", {
method: "POST",
headers: {
"X-Api-Key": apiKey
},
body: formData
})
.then(response => response.blob())
.then(blob => {
const imgUrl = URL.createObjectURL(blob);
document.getElementById("processedImage").src = imgUrl;
document.getElementById("downloadBtn").href = imgUrl;
})
.catch(error => {
console.error("Error:", error);
alert("Failed to remove background. Check your API key.");
});
});
---