Why isn't my CSS parallax working? - html

Question

I've been trying to follow the Keith Clark tutorial for parallax images, but I can't seem to get it working correctly.
I'm using the skeleton CSS framework, and am simply trying to recreate an existing website to get some experience with HTML and CSS.
JSFiddle
#ingredients {
postion: float;
padding: 5rem 0 0;
text-align: center;
min-height: 600px;
}
#ingredients h1{
margin-top: 20rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}
.parallax {
height: 100rem;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 1px;
perspective: 1px;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 100vh 0;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.parallax__layer--back {
-webkit-transform: translateZ(-1px);
transform: translateZ(-1px);
}
.title{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div id="ingredients"><!--
--><div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">
The background
</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">
<h1>The <strong>Freshest</strong> Seasonal Ingredients</h1>
</div>
</div>
</div>
</div>
Scroll all the way down on the HTML, CSS, and Result section and you will find my attempted parallax section in the #ingredients. Right now my issue is that there are two scrollbars in this section. If I get rid of the extra scrollbar, the parallax no longer works.

Answer 1

If you're referring to the horizontal scroll bar. You can add :
body{
overflow-x:hidden;
}
At the beginning of your CSS. JSFIDDLE