モバイルデバイスにカバーイメージを合わせるにはどうすればいいですか？

Question

現在、ウェブサイトをデザインしており、モバイルで表示されたときの表紙画像のサイズについてどうすればよいか分かりません。モバイルでは巨大に見えますが、モバイルデバイスに適しています。

デスクトップ用（完璧に働い）コード：モバイル用

#cover { 
    background: url('...') 50% 0 repeat-y fixed; 
    -webkit-background-size: cover; 
    background-size: cover; 
    background-position: center center; 
    color: #ffffff; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-align: center; 
    -webkit-align-items: center; 
    -ms-flex-align: center; 
    align-items: center; 
    height: 100vh; 
    text-align: center; 
} 

は、私は次の（980、768および760のための異なるセクション）を追加しました：

@media (max-width: 980px) { 

    #cover { 
     height: 65vh; 
     background: url(''); 
     width: auto; 
     max-width: 100%; 
    } 

しかし、それはまだ示していません（デスクトップサイズと同じサイズの文字通り）。 @mediaコードに固定と中心の位置で何かを追加するか、正確な寸法に関連してコードを追加する必要がありますか？私はすでにたくさん試しましたが、ちょっと立ち往生しています...ありがとうございました！ :)

Answer 1

問題は、最初の行にある：

background-image : url('...'); 
background-position-x : 50%; 
background-position-y : 0; 
background-repeat : repeat-y; 
background-attachment: fixed; 

background-attachment: fixedが問題である。

background: url('...') 50% 0 repeat-y fixed; 

これはのための1つの行の略記です。あなたはそれを削除した場合、それが動作し、画像を中心に：fixed`と `背景サイズ：cover`常に動作しません、私は`背景、添付ファイルがあることがわかりました

#cover { 
 
    background : url(http://via.placeholder.com/800x600) 50% 0 repeat-y; 
 
    background-size: cover; 
 
    background-position: center; 
 
    display: flex; 
 
    align-items: center; 
 
    height: 100vh; 
 
    border: blue dashed 2px; 
 
} 
 

 
@media (max-width: 980px) { 
 

 
    #cover { 
 
     height: 65vh; 
 
     width: auto; 
 
     max-width: 100%; 
 
     border: red dashed 2px; 
 
    } 
 
}

<div id="cover"></div>