CODEWITHSUNDEEP
javascripthtmlcss
MinionAttack
MinionAttack

Reputation: 540

Change background gif via JS is not working

I don't know if I'm mixing things but I'm not able to change the background gif of a div on a personal project.

I have a div:

<div id="intro" class="view">
....
</div>

And a CSS:

#intro {
    background: url("../img/gif1.gif") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

So after load the page, if the user changes the song of the music player I've made a function to change the background gif:

let cover = document.getElementById('intro');
let gifs = ['../img/gif1.gif', '../img/gif2.gif', '../img/gif3.gif', '../img/gif4.gif'];
let actual_gif_index = 0;

function changeGif() { // It's called on the music player
  randomGifIndex();
  cover.background = "url('" + gifs[actual_gif_index] + "') no-repeat center center fixed";
}

function randomGifIndex() {
  let randomIndex = actual_gif_index;
  while (randomIndex === actual_gif_index) { //make sure to get the different index
    randomIndex = Math.floor(Math.random() * gifs.length);
  }
  actual_gif_index = randomIndex;
}

But the background doesn't changes... I've tried .style.background or .style.backgroundImage but doesn't works too.

Where is my mistake or which property I've to change? I'm a bit confused.

Regards.

-- EDIT --

I've tried .style.background = but I get a grey background. On the console I can see that the URL it's well-formed and no errors are displayed. If I set the URL explicitly it loads but when it's changed via JS doesn't works.

-- EDIT 2 --

I've found the problem. Apart from having to use the .style.background property, the main problem was the URL's path as @Espen mentioned. I don't know why, but calling the gifs from the Javascript it's different than call them from the CSS.

On the CSS file I've to use this URL:

#intro {
    background: url("../img/gif1.gif") no-repeat center center fixed;
    ...
}

but on the JS I've to use:

let gifs = ['img/gif1.gif', 'img/gif2.gif', 'img/gif3.gif', 'img/gif4.gif'];

instead of 

let gifs = ['../img/gif1.gif', '../img/gif2.gif', '../img/gif3.gif', '../img/gif4.gif'];

Upvotes: 0

Views: 259

Answers (1)

Espen
Espen

Reputation: 2576

You need to change the .style.background property - not the .background property. Check out this documentation: style.background

Also it could be either your url's not resolving to the actual images, or the "fixed" portion of your background style rule. Fixed makes the background relative to the page, not the element.

This example works:

let cover = document.getElementById('intro');
let gifs = ['https://i.postimg.cc/ygQMnXm8/bg1.gif', 'https://i.postimg.cc/n9X6Wj2Y/bg2.gif', 'https://i.postimg.cc/MXX2HNwM/bg3.gif'];
let actual_gif_index = 0;

function changeGif() { // It's called on the music player
  randomGifIndex();
  cover.style.background  = "url('" + gifs[actual_gif_index] + "') no-repeat center center";
}

document.getElementById("btn").addEventListener("click", changeGif);

function randomGifIndex() {
  let randomIndex = actual_gif_index;
  while (randomIndex === actual_gif_index) { //make sure to get the different index
    randomIndex = Math.floor(Math.random() * gifs.length);
  }
  actual_gif_index = randomIndex;
}
#intro{
  background: #000;
  display: block;
  width: 200px;
  height: 200px;
  color: white;
}
<div id="intro" width="200" height="200">

</div>
<button id="btn">
Change BG
</button>

Upvotes: 3

Related Questions