setting background image behind bootstrap container to be full width and stretching it on window resize

JS FIDDLE to replicate what I am having trouble with and the code from the fiddle below: https://jsfiddle.net/ey0n651q/

<div class="first-section">
<div class="container">
<div class="row">
  <div class="col-12 col-md-7 order-2 order-sm-2 order-md-1">
    <div class="left-side">
      <div class="header">
        <h2>Lorem ipsum dolor sit amet</h2>
      </div>
      <p>
        <strong>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem
        ipsum dolor sit amet, consectetur adipiscing elit
      </p>
      <div class="row">
        <div class="col-12 col-sm-6">
          <div class="block">
            <div class="img-block">
              <img src="https://dummyimage.com/50x50/000/fff">
            </div>
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </div>
        </div>
        <div class="col-12 col-sm-6">
          <div class="block">
            <div class="img-block">
              <img src="https://dummyimage.com/50x50/000/fff">
            </div>
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 col-sm-6">
          <div class="block">
            <div class="img-block">
              <img src="https://dummyimage.com/50x50/000/fff">
            </div>
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </div>
        </div>
        <div class="col-12 col-sm-6">
          <div class="block">
            <div class="img-block">
              <img src="https://dummyimage.com/50x50/000/fff">
            </div>
            <h4>Lorem ipsum dolor sit amet</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elitLorem ipsum dolor sit amet, consectetur adipiscing elit</p>
          </div>
        </div>
      </div>
      <div class="button">
        <button class="btn-primary">MORE DETAILS</button>
      </div>
    </div>
  </div>
  <div class="col-12 col-md-5 order-1 order-sm-1 order-md-2">
    <div class="right-side">
  <!--MOBILE CODE IS HERE IN DESKTOP THIS IS EMPTY BLOCK-->
    </div>
  </div>
</div>

.first-section {
background-image: url('https://homepages.cae.wisc.edu/~ece533/images/airplane.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
 }

.block {
text-align: center;
}

.img-block {
 height: 50px;
}

.button {
 text-align: center;
 }

 .right-side {
   /*mobile code goes here-not relevant to this*/
 }

Okay, this is a little complicated. I have a page where I need the background image to be outside of the bootstrap container to fit the full screen. When I resize the browser, I need the BG image to stretch out if the screen is bigger. At the moment it stays attached to the right of the screen and just pulls away leaving a big white space. The row has 2 columns, left side made up of 7 columns and right side made up of 5. The right side is empty. Idealy, I would want the background image attached to the right side but then it won't stretch past the container and it will leave a white space after the background image. I have attached the screenshots below to explain everything that is happening. The first section is where I have put the BG image. It is outside of the container for bootstrap and the rows and all content. That was the only way I could get the BG image to stretch to the right past the padding and margins bootstrap adds in its container. Any help will be great. I know there is some JS I can write but just looking for suggestions and ideas. Thanks!

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here