random background image selection using javascript

by moshfeu

HTML

<div class="hero__bg" id="banner">Large</div>
  <div class="hero__bg hero__bg--sm" id="banner-sm">Small</div>

CSS

.hero__bg {
  font-size: 30px;
    background-size: cover;
    background-position: center;
    background-color: red;

    width: 600px;
    height: 300px;
}

.hero__bg--sm {
    display: block;
    background-color: #81ef00;
    
    width: 300px;
    height: 150px;
}

JavaScript

function swap() {
  const rndimg = [
    "https://i.ibb.co/7RM6xKw/image-01.jpg",
    "https://i.ibb.co/B2STN5y/image-02.jpg",
		"https://i.ibb.co/74j2F7p/image-03.jpg"
  ];
  const mobileRndimg = [
    "https://i.ibb.co/pbnQtm5/image-sm-01.jpg",
		"https://i.ibb.co/bX4VQF5/image-sm-02.jpg",
		"https://i.ibb.co/b2zPTmd/image-sm-03.jpg"
  ];
  const x = (Math.floor(Math.random() * rndimg.length));
  const randomimage = rndimg[x];
  const randomimageMobile = mobileRndimg[x];
  document.getElementById("banner").style.backgroundImage = "url(" + randomimage + ")";
  document.getElementById("banner-sm").style.backgroundImage = "url(" + randomimageMobile + ")";
}

swap();