I have an assignment where I have to create two boxes behind an image. Image below:

assignment design

The tricky thing is, I do not have access to any html, I can only use CSS(sass) and Javascript.

I tried using ::before and ::after pseudo element, but with no luck.

Here is my code html:

<div id="block-about-me" class="block block-block-content block-block-content0a878c11-300c-4b78-a843-f455f03df025 agiledrop-content-full-about-me">
  <div class="container" id="challenge-about-me">

    <div class="content-left">
              <h2>About me</h2>
                    
      <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut enim ligula. Vestibulum ac pharetra risus. Mauris egestas, risus eget posuere vulputate, dolor risus molestie velit, in rutrum felis justo et velit. Praesent finibus dui quis neque hendrerit, sed dictum nisl scelerisque.
        </p>
      </div>
    </div>
    
    <div class="img-right">
       <div class="field field--name-field-image field--type-image field--label-hidden field__item">
         <img src="/frontend-challenge/sites/default/files/styles/about_me/public/2020-02/about_2.jpeg?itok=kXvb3ZcW" width="525" height="480" alt="About me" typeof="foaf:Image" class="image-style-about-me" />
       </div>  
    </div>

  </div>
</div>

And the Sass:

#block-about-me{
    padding: 245px 195px 245px 195px;

    #challenge-about-me{
      @include flexCenter;

      .content-left{
        width: 50%;
        margin-right: 4%;

        h2{
          @include sectionHeader;
        }

        h2::after{
          @include sectionHeaderAfter;
        }

        p{
          margin-top: 100px;
          font-size: $bodySize;
          line-height: 30px;
          color: $darkerBodyColor;
          font-weight: 400;
          position: relative;
          z-index: 999;
        }
      } // END .content-left

      .img-right{
        width: 50%;
        text-align: center;
       
        .image-style-about-me{
          position: relative;
          z-index: 1;
        }
        .image-style-about-me::before{
          content: '';
          position: absolute;
          width: 100px;
          height: 100px;
          background-color: blue;
          top: -20px;
          left: -20px;
          z-index: -1;
        }
      } // END .img-right
    } // END #challenge-about-me
  } // EMD #block-about-me (section)

I have already tried targeting img tag, its classes, different z-indexes etc.