Making a parallax effect on a flexbox column - html

Question

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 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>