css image/image:after and background color

Question

I have an image, image after and a background color. The image after shows up in front of the image and when I give a z-index of -1 it goes behind the background color instead of going behind the image and in front of the background color. How can I sort this error?

Code:

#about .col-left .img{
    height: 100%;
    width: 100%;
    position: relative;
    border: 10px solid black;
}


    #about .col-left .img::after{
    content: "";
    position: absolute;
    left: -33px;
    top: 19px;
    height: 98%;
    width: 98%;
    border: 7px solid yellow;
}

<section id="about">
  <div class="about container">
    <div class="col-left">
      <div class="img">
        <img src="img/ceo.jpg" alt="img" />
      </div>
    </div>
   </div>
</section>