Parallax scrolling on top of full-bleed fixed BG image

Hi,

I am trying to achieve parallax scrolling on top of full-bleed fixed BG image on this single page: https://www.roosbrothers.com/about-2

Currently my BG image moves with the text on the page, when I want only the text to move and slide over the image.

Also, I am having to use an opacity code to make the BG image viewable, therefore my page text is being effected when I want it at full opacity. 

Here is the code snippet I have embedded in the page currently: 

Quote

<style>
  body#collection-65d8d98b7bda0c0bd3e377b0 {
    background-image: url(https://images.squarespace-cdn.com/content/5fad6eae4d2b9f6b5cce9e14/88aa5be8-a1d1-4118-ab66-3305c1a400bc/RoosBrothers_portrait.jpg?content-type=image%2Fjpeg);
   background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-position: fixed;
  height: 100%;
  opacity: .6;
  left: 0;
  top: 0;
  width: 100%;

}
</style>

Any help would be much appreciated!

It should be background-attachment: fixed; this will fixed image and you can achieve parallax effect, but note: this code won't work on iOS

18 hours ago, tuanphan said:

It should be background-attachment: fixed; this will fixed image and you can achieve parallax effect, but note: this code won't work on iOS

 

 

This worked, however as you mentioned on IOS it creates a ton of vertical space above and below the BG image. Is there additional code to make it so when the browser is resized the BG image will crop in width-wise so the image remains full-bleed? 

The page url doesn't exist. Can you check it again?