Overflow hidden property is not working with parallax scrolling

Question

The overflow hidden property is not working as expected when trying it with parallax scrolling.

I am trying to accomplish parallax scrolling with JavaScript everything should work fine but when i try to set the overflow to hidden the image still appearing outside the div

Here is the HTML

<div id="page2">
       <p id="bb">The title</p> //Some title
       <div id="bg"></div> //Blue box in front of the image(design decision)
       <img src="img/Food.jpg" alt="prlx" id="prlx"/> //The image which has the proprety
</div>

Here is my JavaScript eventListener and the function :

window.addEventListener("scroll",func,false);

function func(){
      prlx_lyr_1 = document.getElementById("prlx");
      prlx_lyr_1.style.top = (window.pageYOffset/4)+"px"
}   

And this is my CSS for the image which i am trying to hide the overflowing parts :

#page2 img{
      position:relative;
      top:-300px;
}

And this is the CSS of the div which contain the image

#page2{
      overflow:hidden;
      height:250px;
}

There is some extra CSS for the #bg

Update: here is a

You can notice that the overflow is not hidden the container div is the blue side in the page

Here is a js fiddle

Answer 1

So the issue is position: fixed breaks the element out of the flow of the document and unlike absolute it can't be contained by using relative on a parent. Instead you should set this image as a background set to fixed on a div that is position: absolute:

HTML

<div id="page2">
   <p id="bb">The chef</p>
   <div id="bg"></div>
   <div id="bg-image"></div>
</div>

CSS

#page2{
  overflow:hidden;
  height:250px;
  position: relative;
}

#bg{
  background: #33c1c9;
  height:250px;
  width:100%;
  position:relative;
  z-index:74897;
  opacity:0.4;
}

#bg-image{
  background: url("http://im47.gulfup.com/1Y5tcL.jpg") no-repeat fixed;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

FIDDLE