title: Making a parallax effect on a flexbox column
body: <p>Googled this, but most topics are about parallax effects which involve, like, full widths and / or heights - e.g. for headers. What I want is <a href="http://templates.graphicfort.com/lune/templates/agency-4.html#content-section-2" rel="nofollow noreferrer">this</a>. 
  If you take a look at the "We are good at" section, on the left column, there's a parallax effect. I looked at their code, but there's no chance I'm understanding what they've done there, so I thought that it should work by simply using flexbox.</p>
  
  <p>Now, I managed to do the parallax effect using flexbox and <code>background-attachment: fixed;</code>, but the image looks weird; it gets zoomed in and doesn't center properly. Here's how it looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/KXRQ9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KXRQ9.png" alt="enter image description here"></a></p>
  
  <p>Here's how it should look like:</p>
  
  <p><a href="https://i.stack.imgur.com/aG9qc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aG9qc.png" alt="enter image description here"></a></p>
  
  <p>Here's the part of the code for that:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="section-skills"&gt;
    &lt;div class="item pri"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.section-skills{
      display:flex;
      padding-top: 40px
  }
  
  .item{
      flex-basis: 0;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }
  
  .pri{
      background-image: url(img/skills-007.jpg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      background-attachment: fixed;
      height: 567px;
      width: 100%;
  }
  </code></pre>
  
  <p>Here's a CodePen: <a href="http://codepen.io/anon/pen/VPVmLb" rel="nofollow noreferrer">http://codepen.io/anon/pen/VPVmLb</a></p>
  
  <p>Is there something I'm missing? Or I shouldn't be using flexbox for parallax?</p>