css - モバイルで背景画像が固定されない

Question

私は自分の服のブランド ショップ (SHOPIFY) に取り組んでいて、背景画像を追加しました。デスクトップでは、まさに私が望んでいたように完璧に見えます。しかし、モバイルでは画像が歪んでおり、CSS コードがbackground-attachment: fixed;画像上にある場合でも、製品やその他のコンテンツがスクロールされます。

ウェブサイト: www.hyghassociation.org

ここに私の完全なコードがあります:

    body,
html {
  background: url({{ 'background.jpg' | asset_url }});
    background-color: #000;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
}
  @media only screen and (max-width: 749px) {
body {
    
    background: url({{ 'mobile_background.png' | asset_url }});
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: 100% 100%;
    background-position: center;
    background-attachment: fixed;

誰かがこれで私を助けてくれますか?