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 <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.bodyproperty represents the<body>... node of the current document, ornullif 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>