Stop background collapsing with context-CodePudding

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" >
        <div >
        <div ></div>
            <div >
                <h3 >
                    <span >2023</span>
                    <span >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;
    }

CodePudding user response：

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" >
  <div >
    <div ></div>
    <div >
      <div >
        <div >
          <!-- Image here -->
        </div>
        <div >
          <h3 >
            <span >2023</span>
            <span >benefits</span> overview
          </h3>
        </div>
      </div>
    </div>
  </div>
</div>