CODEWITHSUNDEEP
javascriptcssimagebackground
MikeInDaHouse
MikeInDaHouse

Reputation: 11

How do I have a background image change within a div using JS?

My issue is I am trying to get a background image to change every second within the first div of a travel blog I have been working on using JS. I am also having text display on top of the image. There are couple tutorials on YouTube but they just arent working for me.

my css is:

    #title{
    background-image: url("../images/Nature5.jpg");
    background-size: cover;
    padding-top: 350px;
    padding-bottom: 350px;
    }

And my Javascript is:



var changingImages = document.querySelector('title');

var images = [
   "url('../images/Nature1.jpg')",
   "url('../images/Nature2.jpg')",
   "url('../images/Nature3.jpg')",
   "url('../images/Nature4.jpg')",
   "url('../images/Nature5.jpg')",
   "url('../images/Nature6.jpg')"
    ]


   setInterval( function () {


   var bg = images[Math.floor(Math.random() * images.length)]

   title.style.backgroundImage = bg;

   },1000)

Perhaps the images are too large or maybe I'm just too new to JS.

Any help is appreciated!

I tried placing the variabule "changingImages" within the function also changing the "title.style.backgroundImage = bg;" to be more spacific.

Upvotes: 0

Views: 43

Answers (1)

Ahmad Nazir Arrobi
Ahmad Nazir Arrobi

Reputation: 51

please try this one

add class selector in query selector argument '.title'

var changingImages = document.querySelector('.title'); // the change

var images = [
  "url('../images/Nature1.jpg')",
  "url('../images/Nature2.jpg')",
  "url('../images/Nature3.jpg')",
  "url('../images/Nature4.jpg')",
  "url('../images/Nature5.jpg')",
  "url('../images/Nature6.jpg')"
]


setInterval( function () {


var bg = images[Math.floor(Math.random() * images.length) + 1] // the change

changingImages.style.backgroundImage = bg;  // the change

},1000)

hope this work

Upvotes: 3

Related Questions