css - 解像度が画像サイズを超える場合にのみ背景画像のサイズを変更する

Question

そこで、ブラウザの縦横比に基づいて Web サイトの背景画像のサイズを変更するチュートリアルを見つけました。これは機能しますが、ブラウザの解像度が高すぎて収まらない場合にのみ、画像を切り抜いてサイズを変更したいだけです。

それは使用しています

background-size: cover;

これでうまくいきますが、元のサイズよりも大きい場合にのみサイズを変更したいのです。言い換えれば、背景を小さくするのではなく、大きくしたいだけです。

どんな助けでも大歓迎です、ありがとう！

Answer 1

背景画像の幅がわかっている場合は、メディアクエリを使用して目的を達成できます。

たとえば、背景画像の幅が900ピクセルだとします。

body {
    background: url('/img/background.jpg') no-repeat left top;
}

@media screen and (min-width: 900px) {
    body {
        background-size: cover;     
    }
}   

これにより、900px以上の画面サイズのbackground-size：coverプロパティが設定されますが、小さい画面の場合は元のサイズが保持されます。

メディアクエリをサポートするブラウザのリファレンス：http：//caniuse.com/css-mediaqueries

Answer 2

背景のサイズを修正したい u はこれを使用できます。

page{
       with:960px;
        margin-left:auto;
        margin-right:auto;
        background:black;

        }