css - 本文の応答性の高い繰り返し可能な背景画像、カバーするメディアクエリの変更

Question

ページにグリッドレス CSS フレームワークを使用しています。

Body 要素がラッパーとして使用され、そのラッパーの背景画像が下向きに繰り返されます。

問題は、この画像をレスポンシブにすることです。ここにCSSがあります

html {
    height: 100%;
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    background-color:#5FB7C0;
}
body {
    margin: 0 auto;
    min-height: 100%;
    max-width:960px;
    width:90%;
    color:#fff;
    background: url('../img/background.jpeg') repeat-y; 
}

背景の jpeg は 960 ピクセル幅です。縮小時に背景画像をカバーにするメディアクエリを作成することを考えました。同じ画像でも高さを2倍に変更するため、背景は高さで拡大されません。

@media only screen and (max-width: 1100px) { 
body {
    background: url('../img/mobilebg.jpeg');    
    background-size:cover;
}
}

しかし、縮小すると、高さが幅よりも大きい場合、背景画像は小さいサイズに縮小されません。

問題は、カバー プロパティが高さが画像と同じに見えることですが、幅が同じに見えるようにする必要があります。また、y を繰り返す背景サイズのカバー。

画像を再現可能として正しく作成するにはどうすればよいですか? 固定できますが、常に写真のように見える必要がありますが、サイズが小さい場合は左右にスペースがありません

本当にありがとう！