When I introduce a background color to my about section the image after disappears (image: after is-CodePudding

When I introduce a background color of black the image after disappears, The image after is the yellow border with a z index of -1 appearing behind the image. I need the section to have a background image of black and also for the image after to appear.

    
  

      #about .about {
      flex-direction: column-reverse;
      text-align: center;
      max-width: 1500px;
      margin: o auto;
      padding: 100px 20px;
      }
      #about .col-left {
      width: 250px;
      height: 360px;
      }
      #about .col-right {
      width: 100%;
      }
      #about .col-right h2 {
      font-size: 2.5rem;
      font-weight: 500;
      letter-spacing: 0.2rem;
      margin-bottom: 10px;
      color: yellow;
      }
      #about .col-right p {
      margin-bottom: 20px;
      color: white;
      }
      #about .col-left {
       position: relative;
      }
      #about .col-left .img {
      width: 100%;
      height: 100%;
      border: 10px solid black;
      }
      #about .col-left .img::after {
      content: "";
      position: absolute;
      left: -33px;
      top: 19px;
      height: 98%;
      width: 98%;
     border: 10px solid yellow;
     z-index: -1;
     }

    <section id="about">
      <div class="about container">
        <div class="col-left">
          <div class="img">
            <img src="https://via.placeholder.com/250x360" alt="img" />
          </div>
        </div>
        <div class="col-right">
          <h1 class="section-title">ABOUT US</h1>
          <h2>What we do</h2>
          <p>
            Today is the day.
          </p>
        </div>
      </div>
    </section>

CodePudding user response：

Thats what I get when I add a background-color like that:

#about .col-left .img {
    background-color: #000;
}

But I'm really not sure how it should look like. Maybe you could upload a picture of what you want to achieve?

If you want a yellow shadow you need to postion the image, otherwise your pos absolute on the yellow border doesn't work

#about .col-left .img {
    width: 100%;
    height: 100%;
    border: 10px solid black;
    background-color: #000;
    position: relative;
}
#about .col-left .img::after {
    content: " ";
    position: absolute;
    left: -20px;
    top: 8px;
    height: 98%;
    width: 98%;
    border: 10px solid yellow;
    z-index: -1;
}

In the end there is just one question: why dont you use box-shadows, instead of the :after?

#about .col-left .img {
     box-shadow: -17px 18px 0px 0px rgba(255,255,0,1);
    -webkit-box-shadow: -17px 18px 0px 0px rgba(255,255,0,1);
    -moz-box-shadow: -17px 18px 0px 0px rgba(255,255,0,1);
 }

CodePudding user response：

With the z-index of your img:after set to -1 the <section> will be in front of the img:after so set your z-index of your <section> to -2 that will make it visible.

As shown in the snippet below the yellow border is now in front of the black background. It doesn't seem like everything is aligned properly but from your given CSS I can't make up where what should go. I can improve it if you give more detail about how it should be alligned.

#about {
   position:absolute;
   background:black;
   z-index:-2;
}

#about .about {
  flex-direction: column-reverse;
  text-align: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 100px 20px;
}

#about .col-left {
  width: 250px;
  height: 360px;
}

#about .col-right {
  width: 100%;
}

#about .col-right h2 {
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: 0.2rem;
  margin-bottom: 10px;
  color: yellow;
}

#about .col-right p {
  margin-bottom: 20px;
  color: white;
}

#about .col-left {
  position: relative;
}

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

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

<section id="about">
  <div class="about container">
    <div class="col-left">
      <div class="img">
        <img src="https://via.placeholder.com/250x360" alt="img" />
      </div>
    </div>
    <div class="col-right">
      <h1 class="section-title">ABOUT US</h1>
      <h2>What we do</h2>
      <p>
        Today is the day.
      </p>
    </div>
  </div>
</section>