Gfrktyl

var MAX_IMAGE_WIDTH = 500; // repalce magic number with const

var MAX_IMAGE_HEIGHT = 350;   // repalce magic number with const

var docWidth = document.body.clientWidth;  //replace $(document).width()

var docHeight = document.body.clientHeight || 500;  //Note: document.body.clientHeight returns 0 in this envorment, in browser will be actaul height, setting defalult value of 500  

// prevent negitve values that could place your image off screen

var maxWidth = Math.max(0, docWidth - MAX_IMAGE_WIDTH); 

var maxHeight = Math.max(0, docHeight - MAX_IMAGE_HEIGHT); 

var contentEl = document.getElementById('content');

var image = [ //set innital values and prevent variable hoisiting 

  "https://via.placeholder.com/350x150",

  "https://via.placeholder.com/150x150",

  "https://via.placeholder.com/150x350",

  "https://via.placeholder.com/500x150"

];



function getImage(src, top, left) {

  var imgElement = document.createElement("img");

  imgElement.src = src;

  imgElement.style.top = top + 'px';

  imgElement.style.left = left + 'px';

  imgElement.style.position = 'absolute';

  imgElement.style.opacity = '.3';

  

  return imgElement;

}



function randomPicture() {

  var randomIndex =  Math.floor((image.length) * Math.random());

  var left_position = (Math.random() * maxWidth).toFixed();

  //Assume you wanted height and not width

  var top_position = (Math.random() * maxHeight).toFixed();

  var imgEl = getImage(image[randomIndex], top_position, left_position);

  contentEl.appendChild(imgEl);

}



randomPicture();

randomPicture();

randomPicture();

.left {

  width: 14%;

}



.right {

  width: 84%;

  border-left: none !important;

  overflow: hidden;

}



.left,

.right {

  display: block;

  float: left;

  border: 1px solid #000;

  margin: 0;

  height: 500px;

}



.content-body {

  position: relative;

}



#frame {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  height: 100vh;

  width: 100%;

}



#random {

  opacity: .3;

}



.content {

  padding: 30px 40px;

  overflow: scroll;

  display: block;

}



h1 {

  font-size: 90px;

  padding: 0;

  margin: 0;

}



h2 {

  margin: 3px 0;

}

<div class="left">

  <ul>

    <li><a href="home">Home</a></li>

    <li><a href="Inspo">Inspo</a></li>

    <li><a href="shop">Shop</a></li>

  </ul>

</div>

<div class="right">



  <div class="content" id='content'>

    <div class="header">

      <h1>Challenger</h1>

      <h2>This is the race.</h2>

    </div>



    <div class="content-body">

      <h4>On my mark...</h4>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin aliquet pharetra pharetra. Aliquam mauris leo, blandit vitae vulputate sit amet, imperdiet non magna. Pellentesque gravida gravida dapibus. Vivamus augue neque, dignissim sed bibendum

        non, malesuada sed orci. Nam turpis mi, dictum ac ullamcorper sit amet, ornare nec sapien. Pellentesque at nibh vel lectus porta sodales. Vestibulum malesuada, urna a egestas iaculis, velit neque vehicula nunc, quis tincidunt libero est eget arcu.

        Phasellus in nisl lectus. Curabitur tellus elit, lobortis eget viverra non, tempor eu quam. Duis facilisis dictum nulla, sit amet aliquet augue viverra eget. Curabitur elit tellus, luctus ac pretium et, tristique at enim.</p>



      <p> Morbi gravida vel orci et fringilla. Vestibulum id lorem vel ipsum tincidunt vehicula gravida eget ipsum. Donec feugiat nisl arcu, non consectetur lacus porttitor ac. Morbi et quam et risus suscipit maximus sit amet eu quam. Aliquam non felis dictum,

        porta dolor quis, suscipit nisl. Suspendisse id nulla et odio rutrum convallis. Pellentesque consequat quis ante id sodales. Nam porttitor nulla velit, non sodales diam dignissim ac.</p>



      <p> Sed quis pretium purus, sed tempor arcu. Duis non sapien sed sem posuere dignissim. Sed id dui ipsum. Nam aliquam, arcu at lacinia scelerisque, justo dui tristique odio, et sodales lorem ante in enim. Orci varius natoque penatibus et magnis dis

        parturient montes, nascetur ridiculus mus. Morbi dictum varius quam a congue. Nulla ornare elit quis ante ullamcorper, vitae vestibulum nunc condimentum. Sed dignissim erat vel lacus pulvinar, sit amet maximus lectus varius. Vestibulum ante ipsum

        primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus convallis, turpis ut molestie ultricies, lacus enim convallis mi, quis mollis arcu est vitae mauris. Donec quis tortor eu elit aliquam tincidunt. Sed vel sollicitudin

        justo.

      </p>



      <div id="frame">

        <img id="random" />

      </div>

    </div>

  </div>

</div>