Adding a random background image in CSS using Javascript

I have a folder full of a bunch of gifs I want to use as the background for several elements on my page. I have a door animation on all of these elements and I want to have one of the random gifs display when the door is open. Previously I was just using one singular image for all the elements like this:

HTML

<div class="door-position d1">
   <div class="door-back">
      <button class="door" data-date="11/01/2020">1</button>
   </div>
</div>

CSS

.door-back {
  height: 65px;
  width: 65px;
  border-radius: 50px;
  background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

But I was wondering if there is an innerHTML for your CSS page or if I should be just plugging them directly into my HTML?

If that's the case, will my above style still impact that image? (height, width, size, etc.)

NOTE: the door transforms (opens) to reveal the image on the door-back property.

This was the JS I tried to implement for what it's worth. This version I just tried having the image addresses in the JS file straight up:

HTML

<div class="door-position d1">
            <div class="door-back" >
              <button class="door" onClick="displayImg()" data-date="11/01/2020">1</button>
            </div>
          </div>

JS

const doorBackImg = document.querySelectorAll(".door-back");
const imgArr = [
  "https://media0.giphy.com/media/r3jTnU6iEwpbO/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp",
  "https://media4.giphy.com/media/phmwMLY1kkkMg/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp",
  "https://media0.giphy.com/media/bnH2hkYp97rGM/200.webp?cid=ecf05e478lhuvbydmjxp51r50rufqjcxj2x1v0g6kug4o86s&rid=200.webp",
];

function displayImg() {
  let randNum = Math.floor(Math.random() * imgArr.length);
  doorBackImg.innerHTML = `${imgArr[randNum]}`;
}

If you need any more code or information please let me know! I've not quite found what I'm looking for just yet and nothing I've tried has worked.

Cheers!

I'm not sure I get you right, but here one of my solutions. It works for one door.

const doorBackImg = document.querySelector("#door-back");
const imgArr = [
  "https://media0.giphy.com/media/r3jTnU6iEwpbO/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp",
  "https://media4.giphy.com/media/phmwMLY1kkkMg/200w.webp?cid=ecf05e47gf4jebecm9mhvyym9jgx01lmfl6xd3gesmmmhi6i&rid=200w.webp",
  "https://media0.giphy.com/media/bnH2hkYp97rGM/200.webp?cid=ecf05e478lhuvbydmjxp51r50rufqjcxj2x1v0g6kug4o86s&rid=200.webp",
];

function displayImg() {
  let randNum = Math.floor(Math.random() * imgArr.length);
  doorBackImg.style.backgroundImage = `url(${imgArr[randNum]})`;
}

.door-back {
  height: 65px;
  width: 65px;
  border-radius: 50px;
  background-image: url("https://media4.giphy.com/media/8AdyAfsTMKi9QMaQ6n/giphy.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="door-position d1">
   <div id="door-back" class="door-back">
      <button onClick="displayImg()" class="door" data-date="11/01/2020">1</button>
   </div>
</div>