background-attachment image: fixed not working on mobile - html

Question

I am building a website where I want the background image to be attached fixed.
I have achieved this in desktop browsers with the CSS below, but it doesn't work on Smartphone.
This is a known bug with background-attachment: fixed.
I don't know how to fix it.
#page-header{
height: 300px;
background: url("../img/wood.jpg");
background-attachment: fixed;
color: #fff;
border-bottom: 1px #eee solid;
padding-top: 50px;
}
My HTML
<header id="page-header">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3 text-center">
<h1 id="h1header">Products</h1>
<p>Local, Organic, Tasty</p>
</div>
</div>
</div>
</header>
You can find my website at http://maisonbergeret.com/product.html
My question is how can I keep the exact same effect.

Answer 1

This is what I changed for page-header.
#page-header:before{
content: "";
width: 100%;
height: 300px;
position: fixed;
background: url("../img/wood.jpg")no-repeat center center;
color: #fff;
border-bottom: 1px #eee solid;
padding-top: 50px;
z-index: -10;
display: block;
left: 0;
top: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Below the header, I have a section product with id="products"
section#products{
background-color: #FAEBD7;
}
Same color as my body background-color: #FAEBD7;
Adjusted margins and now it works.