Css – Make a full height background image on a slant

I have a skewed background color for my service section of my quasar app and I am trying to get the images on the left and right sides to become the full height of the slant and full width (half of screen as you will see since its 2 columns). I am trying to basically mask the image into the slant so it looks like the image is cutoff on the tops and buttons to go with the slant.

https://jsfiddle.net/5ufgzhLk/

I will note my example code here does not seem to alternate the images from left to right for some reason but hopefully you get the idea.

My current code is as follows:

<template>
  <div class="q-pa-lg text-center column no-wrap flex-center block-wrapper" id="Services">
    <h2 class="text-h2 text-weight-bolder text-dark q-mb-xs">SERVICES</h2>
    <div class="divider">
      <span></span><span>
        <q-icon color="primary" size="30px" name="fa-solid fa-lightbulb" class="q-ma-sm"/>
      </span><span></span>
    </div>
    <h6 class="text-h6 text-weight-light text-dark q-mt-none">Light The Way offers a variety of electrical services from electrical diagnostics and repairs, service panel upgrades, new wiring for home improvement projects, lighting, and commercial services.</h6>
  </div>
  <div class="printing-block" id="DecksAndPatios">
    <div class="skew-c"></div>
    <div class="colour-block">
      <div class="row q-pa-md block-wrapper reverse-sm">
        <div class="col-sm-6 col-xs-12 column flex-center q-pa-md">
          <q-img
            src="~assets/imgs/services/deck-services.jpg"
            spinner-color="white"
            class="rounded-borders"
          />
        </div>
        <div class="col-sm-6 col-xs-12 column justify-center q-pa-md">
          <h4 class="text-h4 text-dark text-weight-bolder">ELECTRICAL REPAIRS</h4>
          <p class="text-grey-7">Electrical issues can arise from a variety of things and can cause flickering lights, tripped breakers, nonfunctioning outlets, and much more. Although sometimes these issues may be harmless other times they can result in unsafe conditions. It is best to have a licensed electrician ensure your home is correctly wired and everything is functioning as it should. </p>
          <h5 class="text-h5 text-dark text-weight-bold text-left q-mb-none">WHY CHOOSE US?</h5>
          <q-separator class="q-my-md"/>
          <ul class="text-grey-7" style="padding: 0;">
            <li>There is very little we haven't encountered so you can feel comfortable we can fix the issue</li>
            <li>Licensed and insured with over 30 years of experience means you get top quality workmanship</li>
            <li>We will ensure all projects are up to code to ensure a safe living environment</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="skew-cc"></div>
    <div class="white-block" id="HomeRemodeling">
      <div class="row justify-center q-pa-md block-wrapper">
        <div class="col-sm-6 col-xs-12 column flex-center q-pa-md">
          <q-img
            src="~assets/imgs/services/remodel-services.jpg"
            spinner-color="white"
            class="rounded-borders"
          />
        </div>
        <div class="col-sm-6 col-xs-12 column justify-center q-pa-md block-wrapper">
          <h4 class="text-h4 text-dark text-weight-bolder">INTERIOR & EXTERIOR REMODELING</h4>
          <p class="text-grey-7">Some of our most popular interior remodeling projects include kitchen remodeling, full bathroom renovations, and basement finishing. For exterior remodeling projects we do siding replacement, roofing, gutter replacement, doors, windows, and trim.</p>
          <h5 class="text-h5 text-dark text-weight-bold text-left q-mb-none">HIGHLIGHTS?</h5>
          <q-separator class="q-my-md"/>
          <ul class="text-grey-7" style="padding: 0;">
            <li>We only use brand name products that have a proven track record (i.e., Certainteed siding, GAF roofing, etc.)</li>
 

               <li>Variety of design options available including granite counter tops, solid wood cabinets, custom tiling and backsplashes</li>
                <li>We do our best to keep a clean worksite so you can still use your house while the job is being completed</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="skew-c"></div>
        <div class="colour-block" id="NewConstruction">
          <div class="row justify-center q-pa-md block-wrapper reverse-sm">
            <div class="col-sm-6 col-xs-12 column flex-center q-pa-md">
              <q-img
                src="~assets/imgs/services/construction-services.jpg"
                spinner-color="white"
                class="rounded-borders"
              />
            </div>
            <div class="col-sm-6 col-xs-12 column justify-center q-pa-md">
              <h4 class="text-h4 text-dark text-weight-bolder">NEW CONSTRUCTION</h4>
              <p class="text-grey-7">Here at Deck Commander we pride ourselves on being able to tackle any job of any size. This includes home additions, in-law suites, master bedroom suites, and even new home construction.</p>
              <h5 class="text-h5 text-dark text-weight-bold text-left q-mb-none">SO WHATS ALL THE HYPE ABOUT?</h5>
              <q-separator class="q-my-md"/>
              <ul class="text-grey-7" style="padding: 0;">
                <li>We have built complete houses for customers so we know every aspect of the home building process</li>
                <li>Adding on to old home structures requires care and attention to detail which is something we ensure</li>
                <li>Communication is key to small and large projects but especially to large rennovation. So we work with you every step of the process to ensure you get exactly what you want</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="skew-cc"></div>
        <div class="white-block"></div>
    
      </div>
      
    </template>
    
    <script setup>
      import { ref } from 'vue'
    
    </script>
    <style lang="scss" scoped>
      .block-wrapper{
        max-width: 1024px;
        margin-left: auto;
        margin-right: auto;
      }
      /*dividor code for mini t shirt*/
      .divider {
        /* minor cosmetics */
        display: table;
        font-size: 24px;
        text-align: center;
        width: 75%; /* divider width */
        margin: 10px auto 40px; /* spacing above/below */
      }
      .divider span {
        display: table-cell;
        position: relative;
      }
      .divider span:first-child,
      .divider span:last-child {
        width: 50%;
        top: 13px; /* adjust vertical align */
        -moz-background-size: 100% 2px; /* line width */
        background-size: 100% 2px; /* line width */
        background-position: 0 0, 0 100%;
        background-repeat: no-repeat;
      }
      .divider span:first-child {
        /* color changes in here */
        background-image: -webkit-gradient(
          linear,
          0 0,
          0 100%,
          from(transparent),
          to(#000)
        );
        background-image: -webkit-linear-gradient(180deg, transparent, $dark);
        background-image: -moz-linear-gradient(180deg, transparent, $dark);
        background-image: -o-linear-gradient(180deg, transparent, $dark);
        background-image: linear-gradient(90deg, transparent, $dark);
      }
      .divider span:nth-child(2) {
        color: $dark;
        padding: 0px 5px;
        width: auto;
        white-space: nowrap;
      }
      .divider span:last-child {
        /* color changes in here */
        background-image: -webkit-gradient(
          linear,
          0 0,
          0 100%,
          from($dark),
          to(transparent)
        );
        background-image: -webkit-linear-gradient(180deg, $dark, transparent);
        background-image: -moz-linear-gradient(180deg, $dark, transparent);
        background-image: -o-linear-gradient(180deg, $dark, transparent);
        background-image: linear-gradient(90deg, $dark, transparent);
      }
    
      /*diagonal dividor markup*/
      .colour-block {
        background:#F5F5F5;
        width:100%;
        padding-top:100px;
        color:#fff;
      }
      .white-block {
        background:#fff;
        width:100%;
        padding-top:100px;
        color:#F5F5F5;
      }
      /*------------------*/
      /*  SKEW CLOCKWISE  */
      /*------------------*/
      .skew-cc{
        width:100%;
        height:100px;
        position:absolute;
        left:0px;
        background: linear-gradient(to right bottom, #F5F5F5 49%, #fff 50%),    linear-gradient(-50deg, #ffffff 16px, #000 0);
      }
    
      /*-------------------------*/
      /* SKEW COUNTER CLOCKWISE  */
      /*-------------------------*/
      .skew-c{
        width:100%;
        height:100px;
        position:absolute;
        left:0px;
        background: linear-gradient(to left bottom, #fff 49%, #F5F5F5 50%);
      }
    </style>

The icing on the cake is after I get this image the way I want I need the mobile to stack the image on top of the wording as I currently do but keep the slant on top to keep the effect going.