Stop background collapsing with context - html

Question

I have a div which has a background image and some text and I want the content of div to stop overlapping from a part (ribbon part) of the backgrounf image. Please check images so that it's clear to you what I am willing to do.
This is how it should appear on all screens (except phones)
This is not how I want it to be. I want the text to stay away from ribbon for all screen sizes
Html:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span>
overview
</h3>
</div>
</div>
</div>
css:
#overview1 {
background-image: url("ribbon.jpg");
background-position: 10% 100%;
background-size: cover;
background-repeat: no-repeat;
color: white;
}

Answer 1

I would do it a bit differently if I were you. Instead of setting the background-image on the #overview-1, I would make two columns (put the image inside the left column and put the text inside the right column).
It would be easier to help you if you edit your question and add more HTML & CSS. Also, having a similar image (at least) would be very helpful to test the snippet.
Something like this:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<div class="row">
<div class="col-6">
<!-- Image here -->
</div>
<div class="col-6">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span> overview
</h3>
</div>
</div>
</div>
</div>
</div>