Changing Background Image in Fade In and Out

Check out this Changing Background Image in Fade In and Out using JavaScript for your web design. Just change the image link of your selection, and you're good to go. Here's the script below -

<style>

body {

  margin:0;

  font-family:'QuickSand', sans-serif, Oswald, sans-serif;

  }

/* Background layers */

  

.bg {

  position: fixed;

  inset:0;

  background-size: cover;

  background-position: center;

  background-repeat:no-repeat;

  transition: opacity 2.5s ease-in-out;

  z-index:-2;

  }

#bg1 {  opacity:1;  }

#bg2 {  opacity:0;  }

</style>

<script>

const images = [

  "https://churchofjesuschristtemples.org/assets/img/temples/cebu-city-philippines-temple/cebu-city-philippines-temple-4000.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/cebu-city-philippines-temple/cebu-city-philippines-temple-33251.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/cebu-city-philippines-temple/cebu-city-philippines-temple-3999.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44347.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44348.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44350.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44351.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-44352.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/manila-philippines-temple/manila-philippines-temple-7439.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45863.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45864.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45865.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45866.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45872.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45873.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45874.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/urdaneta-philippines-temple/urdaneta-philippines-temple-45876.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/alabang-philippines-temple-66139.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/alabang-philippines-temple-65306.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/64760.jpg",

  "https://churchofjesuschristtemples.org/assets/img/temples/alabang-philippines-temple/alabang-philippines-temple-8191.jpg"

];

// Create two background layers

const bg1 = document.createElement("div");

const bg2 = document.createElement("div");

bg1.id = "bg1";

bg2.id = "bg2";

bg1.className = "bg";

bg2.className = "bg";

document.body.prepend(bg1);

document.body.prepend(bg2);

let showingFirst = true;

function randomImage(){

    return images[Math.floor(Math.random()*images.length)];

}

function setBG(el,img){

    el.style.backgroundImage =

    `linear-gradient(to right,

    #F5DFDC30,

    #F5EBDC80,

    #F3F5DC80,

    #DCF5DF80,

    #DCE6F580,

    #F5DCF330),

    url('${img}')`;

}

// Initial image

setBG(bg1, randomImage());

setInterval(()=>{

    const next = randomImage();

    if(showingFirst){

        setBG(bg2,next);

        bg2.style.opacity=1;

        bg1.style.opacity=0;

    }else{

        setBG(bg1,next);

        bg1.style.opacity=1;

        bg2.style.opacity=0;

    }

    showingFirst=!showingFirst;

},8000);

</script>