CSSの視差の背景

Question

私は現在https://dev.shivampaw.com/meを開発しており、視差のある背景を作るべき「視差-bg」というクラスがあります。

私の連絡先（セクション）は下部にありますが、私のヒーロー（上部）とテクスチャ（中）ではうまく動作していません。

これは私が使用していますjQueryのです：

$(window).scroll(function() { 
    var scrolledY = $(window).scrollTop(); 
    $('.parallax-bg').css('background-position', 'center ' + ((scrolledY) - 70) + 'px'); 
}); 

を、コンタクトフォームセクションのためのCSSだけである：

section#contact{ 
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/bg-contact.jpg) no-repeat center -70px; 
    background-size: cover; 
    background-attachment: scroll; 
    color: white; 
} 

主人公のセクションのための：

section#hero{ 
    background: linear-gradient(to bottom, rgba(0,0,0, 0.65) 0%,rgba(0,0,0, 0.65) 100%), url(https://www.shivampaw.com/images/top-bg.jpg) no-repeat center -70px; 
    background-size: cover; 
    background-attachment: scroll; 
    text-align: center; 
    color: white; 
    font-weight: bold; 
    padding-bottom: 50px; 
} 

誰がなぜこれが起こっているのか知っていますか？

おかげ

更新：視差によって私は一定の背景を意味します。私はjqueryを使うので、携帯電話でも動作します。

Answer 1

私を次のように私のjQueryを変更することで、これを固定：

$(window).on('scroll resize load',function(){ 
    // 500px 
    var scrolledY = $(window).scrollTop(); 
    $('.parallax-bg').each(function(){ 
     $obj = $(this); 
     var pixelsY = $obj.data("position"); 
     $obj.css('background-position', 'center ' + ((scrolledY) + pixelsY) + 'px'); 
    }); 
}); 

とクラス視差-BGは私のhtmlでの位置と呼ばれるデータ属性を追加します。これは問題を解決した私の希望する背景位置y offsetを表していました。

また、CSSからno-repeatを削除しました。