title: CSS Parallax Effect Stretching out my Background Images
body: <p>I have been struggling for the past several weeks with the parallax effect in a section on the profile page I am building. </p>
  
  <p>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. </p>
  
  <p>I added <strong>background-attachment: fixed;</strong> 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: <a href="https://codepen.io/snailssnooze123/full/BmPxgN/" rel="nofollow noreferrer">https://codepen.io/snailssnooze123/full/BmPxgN/</a></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Here is what I would like the picture on the right to look like, only with the Parallax effect:<a href="https://codepen.io/snailssnooze123/full/LOBmgB/" rel="nofollow noreferrer">https://codepen.io/snailssnooze123/full/LOBmgB/</a>.</p>
  
  <p>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 :)</p>