CSS Parallax Effect Stretching out my Background Images

I have been struggling for the past several weeks with the parallax effect in a section on the profile page I am building.

In this section, I have three 4-column divs. The 1st div contains my text, the 2nd div contains one large background image, and the 3rd div contains two smaller background images.

I added background-attachment: fixed; to three images, and while it works fine with the large image in the 2nd div, the other two images get stretched beyond recognition. Here is the CSS styling that I have right now: https://codepen.io/snailssnooze123/full/BmPxgN/

#about-bg-selfie {
  background-image: url("https://www.dropbox.com/s/aqf4nj496qeg0db/alleyPic.JPG?raw=1");
  height: 500px;
  width: 300px;
  background-repeat: no-repeat;
  background-position: center;    
  background-size: 35%; 
  background-attachment: fixed;
  border-top: 500px solid transparent;
  border-left: 90px solid #fff;
  margin-left: 60px;
  padding-right: 250px;
}

#about-bg-pyramids {
  background-image: url("https://www.dropbox.com/s/savr06trk2onj2c/pyramids.jpg?raw=1");
  min-height: 250px;
  width: 350px;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#about-bg-temple {
  background-image: url("https://www.dropbox.com/s/twatj0fumugvrbg/temple.jpg?raw=1");
  height: 240px;
  width: 350px;
  background-position: center center;
  background-size: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin-top: 10px;
}

Here is what I would like the picture on the right to look like, only with the Parallax effect:https://codepen.io/snailssnooze123/full/LOBmgB/.

I have been playing with the code for days and can't get it to work. Could anyone help me figure this out? I'm afraid I must be missing something really obvious here :)

I found what is the problem. you have to remove this from "#about-bg-pyramids" and "#about-bg-temple" css :

background-attachment: fixed;