Question 330000 in Html Question posted in
Some basic documentation can be found here.

how do i change background that is an image through admin button in html tailwind css

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.

Tags:

2

Answers


  1. 0

    the above js code is working fine but the problem is that height of div with class bodyContainer is 0 , add height to this class other that 0 such as 500px to make it work

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search