This is to stop a stuttered appearance of background images. The image will only show once it’s fully loaded.
<!-- html -->
<section id="frontPageFirstSectionContainer">
<section>
<script>
/* This makes sure the background image only displays when the
page is fully loaded */
var img=new Image();
img.onload = function() {
var backgroundElement= document.getElementById("frontPageFirstSectionContainer");
backgroundElement.style.backgroundImage = "url('"+this.src+"')";
backgroundElement.style.backgroundRepeat= "no-repeat";
backgroundElement.style.backgroundSize= "cover";
};
img.src = "/webimages/boris-debusscher-9Rtp9uvTs3Q-unsplash-1920x1080.jpg?t=" + "?_=" + (+new Date());
</script>
/*first page section CSS*/
#frontPageFirstSectionContainer {
display:flex;
flex-direction: column;
align-items: center;
background: gray;
/*background-image: url("/webimages/boris-debusscher-9Rtp9uvTs3Q-unsplash.jpg");
background-repeat: no-repeat;
background-size: cover;*/
width: 100%;
}
It agree, your idea simply excellent