So below is the code it seems to run ok but i can't see the background image on website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dynamic Wallpaper Change</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- Main body div start -->
<body>
<!-- Header div Start -->
<div class="bg-gray-800 text-white p-4">
<!-- Admin Button -->
<button
class="bg-blue-500 text-white px-4 py-2 rounded"
onclick="showImageForm()"
>
Admin
</button>
</div>
<!-- Header div end -->
<!-- Body div start -->
<div id="bodyContainer"></div>
<!-- Body div end -->
<!-- Footer div start -->
<div></div>
<!-- Footer div end -->
<!-- Image Upload Form -->
<!-- Image Upload Form -->
<div
id="imageFormContainer"
class="hidden fixed top-0 left-0 w-screen h-screen bg-gray-500 bg-opacity-75"
>
<form id="imageForm" class="p-8 bg-white max-w-md mx-auto mt-16 rounded">
<label for="imageInput" class="block mb-4 text-lg font-semibold"
>Upload Image:</label
>
<input type="file" id="imageInput" class="mb-4" accept="image/*" />
<button
type="button"
onclick="changeBackground()"
class="bg-blue-500 text-white px-4 py-2 rounded"
>
Change Background
</button>
<button
type="button"
onclick="hideImageForm()"
class="bg-gray-500 text-white px-4 py-2 ml-4 rounded"
>
Cancel
</button>
</form>
</div>
<script>
// Function to show the image upload form
function showImageForm() {
document
.getElementById("imageFormContainer")
.classList.remove("hidden");
}
// Function to hide the image upload form
function hideImageForm() {
document.getElementById("imageFormContainer").classList.add("hidden");
}
// Function to change the background dynamically
function changeBackground() {
const fileInput = document.getElementById("imageInput");
const bodyContainer = document.getElementById("bodyContainer");
if (fileInput.files.length > 0) {
const imageURL = URL.createObjectURL(fileInput.files[0]);
bodyContainer.style.backgroundImage = `url('${imageURL}')`;
bodyContainer.style.backgroundSize = "cover";
bodyContainer.style.backgroundRepeat = "no-repeat";
bodyContainer.style.backgroundPosition = "center";
}
hideImageForm();
}
</script>
</body>
<!-- Main body div end -->
</html>
i tried the above code again and again but can't see the image i dont know whats wrong. Please help me out i dont know what to do onward.i am really looking forward to solving this problem by the help of you guys.
Your logic is consistent, the only issue I found was that the "bodyContainer" div has height equal to zero
if you change the tag as follows:
<div id="bodyContainer" class="h-screen"></div>
it resolves the issue
Please do not forget to mark the answer as accepted if it meets your requirements