Question 241575 in CSS Question posted in
Some basic documentation can be found here.

Css – Cannot Change backgound image using javascript though the image change is shown in console?

hello people i am trying to change background images on a interval of 3 seconds using javascript the code seem to be correct because the images can be seen changed in the console
but not on the screen i see blank screen after 3 seconds.

here is my react code

import React, { useEffect, useState } from "react";

function Home() {
  let i = 0; // Start index from 0

  useEffect(() => {
    const interval = setInterval(backgroundImages, 3000);
    return () => {
      clearInterval(interval); // Clean up the interval when the component unmounts
    };
  }, []);

  function backgroundImages() {
    const imagearr = [
      "rajwada.jpeg",
      "indore.jpeg",
      "females.jpeg",
      "mayor.jpg"

    ]


    console.log("Changing background image");
    document.getElementById("main").style.backgroundImage = `url(${imagearr[i]})`;
    i++;
    if (i === imagearr.length) {
      i = 0;
    }
  }


  return (
    <div className="PARENTHERO">

      <div className="Hero" id="main" >
        {/* <div className="WELCOME">
        <h1 className="Heading2">LUCKY DRAW</h1>
        <h1 className="Heading2"> NAGAR PALIKA NIGAM INDORE</h1>
        </div> */}
      </div>
    </div>
  );
}

export default Home;

here are my css classes

.Hero {
    background-image: url(mayor.jpg);
    height: 60vh;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.PARENTHERO {
    height: 100%;
}

by default i am using an image in the background also consider the names of the images to be correct and no path issues

Tags:

2

Answers


  1. 0

    I tried you code in my next js demo project and it worked fine for me, Although i did some changes

    1. Defined a constant for ‘main’, Due to this error ( i think it is due to TS ) enter image description here
    2. Used my own images.
    3. Also I have used relative path in css file enter image description here
      let i = 0; // Start index from 0

  useEffect(() => {
    const interval = setInterval(backgroundImages, 3000);
    return () => {
      clearInterval(interval); // Clean up the interval when the component unmounts
    };
  }, []);

  function backgroundImages() {
    const imagearr = [
      "Gojo-3.jpg",
      "gojo-2.jpg",
      "Gojo-1.jpeg",
    ]

    console.log("Changing background image");

    // Changes start
    const ele = document.getElementById("main")
    if(ele){
      ele.style.backgroundImage = `url(${imagearr[i]})`;
    }
    // Changes End

    i++;
    if (i === imagearr.length) {
      i = 0;
    }
  }
    Login or Signup to reply.
  2. 0

    Your code seems to be all correct I think the issue is that you haven’t imported the images u want to use in the animation.please import the images any try again let me know what happens.

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

Back To Top
Search