I can't make changing background image of my website to change

Question

I am trying to make the background image of my website to change every certain quantity of seconds, I have tried to do this with this:

var images = new Array(
  'Space.gif',
  'Windows.gif',

);

var slider = setInterval(function() {
  document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("'+images[0]+'")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 10000);

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
}

<div class="bg-img" style="background-image: url('space.gif'),background-image: url('windows.gif');">
  <div class="overlay"></div>
</div>

And I have also tried with this code of JavaScript:

 function changeBg(){

  const images = [
     'url("Space.gif")',
     'url("Windows.gif")',
    ]
    const selection = document.querySelector('selection')
    const bg = images[Math.floor(Math.random()* images.length)];
    selection.style.backgroundImage = bg; 
}          
setInterval(changeBg, 1000000)

But nothing works :(

In your CSS, you are preparing the `` for a background image. But your JavaScript references the `.bg-img` element. Do you want to apply the background image to the `` or to the `
`? Also, if the `
` has no width or height, it likely won't show on the page. — showdev, Oct 10 '21 at 17:38
I'm trying to change the background to the full page, so it means I will have to change in the css the "body" for "bg-img" right? — Kilobyteboy98, Oct 10 '21 at 18:16
I could fix that typo of the missing quotations but my page still doesn't change the background image :/ — Kilobyteboy98, Oct 10 '21 at 22:01

showdev · Answer 1 · 2021-10-11T07:56:44.027

In your CSS, you are preparing the <body> for a background image:

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
}

But you are adding the image to an element with the class "bg-img" rather than the <body>:

document.getElementsByClassName('bg-img')...

You can either (1) add the image to the <body> or (2) make the <div> cover the full screen:

1) Set the image on the <body> element:

The Document.body property represents the <body> ... node of the current document, or null if no such element exists.

var images = new Array(
  'https://fakeimg.pl/200x150/282868/eae0d0/',
  'https://fakeimg.pl/200x150/682828/eae0d0/'
);

var slider = setInterval(function() {
  document.body.setAttribute('style', 'background-image: url("' + images[0] + '")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 2000);

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  background-image: url('https://fakeimg.pl/200x150/282828/eae0d0/');
}

2) Or make the <div> full-screen:

Since the <div> has no content and no width or height, it will not show on the page. You can use CSS to make the element cover the browser window.

var images = new Array(
  'https://fakeimg.pl/200x150/282868/eae0d0/',
  'https://fakeimg.pl/200x150/682828/eae0d0/'
);

var slider = setInterval(function() {
  document.getElementsByClassName('bg-img')[0].setAttribute('style', 'background-image: url("' + images[0] + '")');
  images.splice(images.length, 0, images[0]);
  images.splice(0, 1);
}, 2000);

.bg-img {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: 100%;
  background-image: url('https://fakeimg.pl/200x150/282828/eae0d0/');
}

<div class="bg-img"></div>

I can't make changing background image of my website to change

1 Answers1