Seeking assistance in setting up a basic background image slideshow on my website. I have been unable to locate a suitable tutorial online, so I'm reaching out here for guidance.
HTML:
<body>
<h3>Welcome!</h1>
<p>Lorem ipsum dolor sit amet</p>
</body>
JS:
var i = 0;
var images = [];
var slideTime = 3000; // 3 seconds
images[0] = '/img/bg1.jpg';
images[1] = '/img/bg2.jpg';
images[2] = '/img/bg3.jpg';
function changePicture() {
document.body.style.backgroundImage = images[i];
if (i < images.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("changePicture()", slideTime);
}
window.onload = changePicture;
CSS:
body {
background-image: url("img/bg2.jpg");
background-position: center;
background-size: cover;
}