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.

You may use clip-path to create the slants, then padding and margin to clear the slant areas and overlap each rows (partially or totally) .

grid can also help to build the layout and rythm. order on the img tag can alternate visually its position. On smaller screen rows will turn into columns but will remain slanted. You can tune your breaking point from grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); which is around 600px - 650px .

here is all together the rules dispatch on a shorter markup .
(added bg and shadows to demonstrate that the slant area is not hiding anything while overlap is partial, not the best design ) do not hesitate to ask for clarification.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
margin: 0;
padding: 1em 1em 116px;
background: linear-gradient(to bottom left, gold,tomato);
}
[data-grid] {
display: grid;
gap: 1em;
filter: drop-shadow(0 0 5px);
}
[data-grid] > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
padding-block: 100px;
margin-bottom: -100px;
background: lightgray;
position: relative;
clip-path: polygon(0 0, 100% 100px, 100% calc(100% - 100px), 0% 100%);
}
[data-grid] > div:nth-child(odd) {
/* alternate background colors */
background: white;
clip-path: polygon(0 100px, 100% 0, 100% 100%, 0 calc(100% - 100px));
}
[data-grid] > div:nth-child(odd) > img {
/* alternate image position at screen */
order:1;
}
[data-grid] > div > div {
padding: 2em;
}
img {
width: 100%;
object-fit: cover;
height: calc(100% + 200px);/* add paddings from parent */
margin: -100px 0;/* let it go into vertical padding areas */
}
@media (max-width: 650px) {
img {
width: 100%;
object-fit: cover;
height: calc(100% + 100px);
margin: -100px 0 0;
}
}
h2,
h3,
h4,
h5,
h6,
p {
color: #555;
text-shadow: 0 0 black, 0 0 1px white;
}
h2,
h3,
h4,
h5,
h6 {
font-size: 1.4rem;
box-shadow: 0 0.5rem 3px -.5rem ;
}
ul {
padding: 0;
list-style-position: inside;
display: grid;
gap: 1rem;
border-bottom:2rem solid transparent;
box-shadow: 0 60px 0 -58px  purple;
}

<!-- language: lang-html -->

<div>
<h2>SERVICES</h2>
<h6>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 data-grid>
<div>
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
<div>
<h4>ELECTRICAL REPAIRS</h4>
<p>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>WHY CHOOSE US?</h5>
<ul>
<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>
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
<div>
<h4>INTERIOR & EXTERIOR REMODELING</h4>
<p>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>HIGHLIGHTS?</h5>
<ul>
<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>
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
<div>
<h4>NEW CONSTRUCTION</h4>
<p>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>SO WHATS ALL THE HYPE ABOUT?</h5>
<ul>
<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>
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
<div>
<h4>NEW CONSTRUCTION</h4>
<p>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>SO WHATS ALL THE HYPE ABOUT?</h5>
<ul>
<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>
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
<div>
<h4>NEW CONSTRUCTION</h4>
<p>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>SO WHATS ALL THE HYPE ABOUT?</h5>
<ul>
<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>
<img src="https://cdn.quasar.dev/img/parallax2.jpg" />
<div>
<h4 class="">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="">SO WHATS ALL THE HYPE ABOUT?</h5>
<ul>
<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>

<!-- end snippet -->

see your css to use 50% width for the .divider span:nth-child(2)

working example

.divider span:nth-child(2) {
    color: $dark;
    padding: 0px 5px;
    width: 50%;
    white-space: nowrap;
  }