It's been a while so relearning lots of html stuff. I have a responsive image that I want to randomly change each time the page is visited. I have it working OK except that the image is displayed at its actual/original size, not the reduced size that it should be, dictated by the browser window size.

The html:

  <div class="background">
        <div id="imgspan">
        </div>

javascript: 
window.onload = function() {
myHeaderFunction();

};

function myHeaderFunction() {
var myImageList = ["header01.jpg", "header02.jpg", "header03.jpg", "header04.jpg"];
var item = myImageList[Math.floor(Math.random() * myImageList.length)];
var myPath = "imagesHeader/" + item;
document.getElementById("imgspan").style.background = "url('" + myPath + "') center center no-repeat";
console.log(myPath);
setSize();

}

  function setSize() {
let yourImg = document.getElementById("imgspan");
let imgWidth = yourImg.clientWidth;
document.getElementById("imgspan").width = imgWidth;
document.getElementById("imgspan").height = "auto";

}

  css:
.background #imgspan {
position: relative;
top: 0;
text-align: center;
max-width: 100%;
height: auto;
display: block;
text-shadow: none;
color: transparent;
background-size: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 1.0;
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s;

}

.background #imgspan {
/* height/width of image */
padding-top: 41%;
display: block;
max-width: 100%;
height: auto;

}

#imgspan {
background: url("../imagesHeader/header01.jpg");

}

I'm guessing this is something very simple that I'm missing.