Making a parallax effect on a flexbox column

Question

Googled this, but most topics are about parallax effects which involve, like, full widths and / or heights - eg for headers. What I want is this . 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.

Now, I managed to do the parallax effect using flexbox and background-attachment: fixed; , but the image looks weird; it gets zoomed in and doesn't center properly. Here's how it looks like:

Here's how it should look like:

Here's the part of the code for that:

HTML:

<section class="section-skills">
  <div class="item pri"></div>

CSS:

.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%;
}

Here's a CodePen: http://codepen.io/anon/pen/VPVmLb

Is there something I'm missing? Or I shouldn't be using flexbox for parallax?

Answer 1

revised codepen

 .section-skills { display: flex; padding-top: 40px; } .item { display: flex; flex-direction: column; flex: 1; } .pri { background-image: url(http://placehold.it/800x600); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; height: 567px; width: 100%; } .sec { background: #f7f7f7; align-items: flex-start; } .skills-box { width: 85%; margin-top: 90px; padding-left: 10%; } .skills-box .sub-text:after { margin-left: 0; margin-top: 30px; } .skills-box h2, .skills-box .sub-text { text-align: left; } .skills-box .sub-text { margin-left: 0; width: 80%; } .sec h3 { font-weight: 400; font-size: 130%; } /* Skill Bars */ .skillbar { position: relative; display: block; margin-bottom: 25px; width: 100%; background: #eee; height: 45px; border-radius: 3px; transition: 0.4s linear; transition-property: width, background-color; } .skillbar-title { position: absolute; top: 0; left: 0; width: 110px; font-weight: bold; font-size: 14px; color: #ffffff; background: #6adcfa; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-title span { display: block; background: rgba(0, 0, 0, 0.1); padding: 0 20px; height: 45px; line-height: 45px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-bar { height: 45px; width: 0px; background: #6adcfa; border-radius: 3px; } .skill-bar-percent { position: absolute; right: 10px; top: 0; font-size: 11px; height: 45px; line-height: 45px; color: #ffffff; color: rgba(0, 0, 0, 0.4); } 

 <section class="section-skills"> <div class="item pri"></div> <div class="item sec"> <div class="skills-box"> <h2>WE ARE GOOD AT</h2> <p class="sub-text">Morbi tempor elit leo, eget mattis massa porta ac</p> <div class="skillbar clearfix " data-percent="90%"> <div class="skillbar-title" style="background: #d35400;"><span>HTML5</span> </div> <div class="skillbar-bar" style="background: #e67e22;"></div> <div class="skill-bar-percent">90%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="85%"> <div class="skillbar-title" style="background: #2980b9;"><span>CSS3</span> </div> <div class="skillbar-bar" style="background: #3498db;"></div> <div class="skill-bar-percent">85%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="60%"> <div class="skillbar-title" style="background: #2c3e50;"><span>jQuery</span> </div> <div class="skillbar-bar" style="background: #2c3e50;"></div> <div class="skill-bar-percent">60%</div> </div> <!-- End Skill Bar --> <div class="skillbar clearfix " data-percent="75%"> <div class="skillbar-title" style="background: #46465e;"><span>PHP</span> </div> <div class="skillbar-bar" style="background: #5a68a5;"></div> <div class="skill-bar-percent">75%</div> </div> <!-- End Skill Bar --> </div> </div> </section>