背景画像がスクロールのコンテンツと一緒に移動する

Question

私はワードプレスを持っているウェブサイトのjqueryコードに問題があります。 これは私のバイオリンです：

$('.test1').scroll(function() { 
 
    var x = $(this).scrollTop(); 
 
    $(this).css('background-position', '0% ' + parseInt(-x/10) + 'px'); 
 
});

.test1 { 
 
    width: 100%; 
 
    height: 100%; 
 
    background: #fff url(http://imgie.pl/images/2017/10/11/pieczatki-w-tlev2c3b6c.png) no-repeat fixed center center; 
 
}

<div class="test1"> 
 
    <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    </p> 
 
    Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    </p> 
 
    Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    </p> 
 
    Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    <p>Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
    </p> 
 
    Lorem ipsum dolor sit amet tempor varius, scelerisque a, bibendum scelerisque pede turpis sed est. Aliquam eleifend mi, ut orci sit amet, purus. Class aptent taciti sociosqu ad litora torquent per inceptos hymenaeos. Pellentesque habitant morbi tristique 
 
    eget, faucibus eros lacus, congue ut, consequat auctor auctor odio. Aliquam orci. Cum sociis natoque penatibus et malesuada enim non magna. Aliquam erat urna, id sollicitudin magna. Vestibulum ante sit amet, vestibulum ipsum. Morbi tincidunt. Fusce 
 
    condimentum sem vel purus. Pellentesque vel purus. Phasellus vitae metus. Curabitur blandit egestas purus. Aenean ligula quis wisi. Mauris vitae arcu nec pede. Morbi nibh justo, eget est. Pellentesque mattis lorem non enim. Etiam non odio. Etiam rutrum. 
 
    Nunc arcu erat lacus, congue sit amet ligula. Suspendisse justo nibh, mollis faucibus, convallis tellus. Integer sollicitudin quis, tellus. Aenean nulla orci quis sem. Pellentesque egestas ac, augue. Vestibulum sollicitudin. Donec lectus dapibus nisl. 
 
    Nam sed est dolor, scelerisque iaculis. Pellentesque laoreet condimentum, urna ut justo quis venenatis eu, pulvinar ligula, nonummy at, suscipit ultricies, velit eleifend et, tincidunt consequat, orci ultricies libero laoreet ante in erat ac dolor. 
 
</div> 
 
<script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

私は背景画像がscoll上のコンテンツと一緒に移動しますが、それは動作しないということです試してみました。他のフィドルでは、このコードは完璧に働いていましたが、私はこれをwordpressで行いたいと思っています。あなたは私の人を助けることができますか？

Answer 1

私はあなたの質問が理解するものから、あなたはこれを達成するためにCSSの代わりにJSを使用する必要があります。

.test1 { 
    width: 100%; 
    height: 100%; 
    background: #fff url(http://imgie.pl/images/2017/10/11/pieczatki-w-tlev2c3b6c.png); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-attachment: fixed; 
} 

background-attachment: fixedをここ

キーであり、これで、あなたのjqueryのコードは役に立ちません。