ブートストラップ - 異なるブレークポイントの異なる画像の背景...バグはどこですか？

Question

デバイスごとに2つの異なる背景イメージを表示したいが、コードがあるが、正しく動作しない...

バグはどこですか？

@media (max-width: 720px) { 
 
    body { 
 
    margin: 0; 
 
    background-color: #ff0000; 
 
    background-image: url('img/bg1.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    background-size: 100% auto; 
 
    } 
 
} 
 

 
@media (min-width: 721px) { 
 
    body { 
 
    margin: 0; 
 
    background-color: #303441; 
 
    background-image: url('img/bg2.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    background-size: 100% auto; 
 
    } 
 
}

Answer 1

興味があるだけでは、なぜあなたは最小幅と最大幅を混合していますか？

通常、デスクトップを最初にターゲティングしてからモバイルに移行する場合、最大幅が使用されます。

モバイルを最初にターゲットにしてデスクトップに向かうには、min-widthを使用します。

http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/

1pxのがサイズ変更時の違いを得ることが難しく、同じ概念ですので、私は正確な画面サイズを少し変更しました。フルページモードで実行します。

したがって、デフォルトでは720未満（モバイル先）の最初の画像がすべて取得されます。スクリーンヒット720が変化すると、それは変化し、820で再び上昇する。ここで

body { 
 
    margin: 0; 
 
    background-image: url('http://www.dreamstime.com/static/free2/257779.jpg'); 
 
    background-color: #FFF; 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    background-size: 100% auto; 
 
} 
 

 
@media (min-width: 720px) { 
 
    body { 
 
     background-color: #ff0000; 
 
     background-image: url('http://pic.1fotonin.com//data/wallpapers/7/WDF_562760.jpg'); 
 
    } 
 
} 
 

 
@media (min-width: 820px) { 
 
    body { 
 
     background-color: #303441; 
 
     background-image: url('http://images.all-free-download.com/images/wallpapers_large/old_farm_wallpaper_landscape_nature_wallpaper_1439.jpg'); 
 
    } 
 
}

分幅および最大幅との差をexplaing良いユーチューブビデオです。 https://www.youtube.com/watch?v=Gi3INcPOvo8

Answer 2

最初の画像へのパスを確認してください。私のイメージは必要なように動作します。

そして、私はDan Weberに同意し、コードを簡略化することができます。

body { 
 
    margin: 0; 
 
    background-color: #ff0000; 
 
    background-image: url('http://glebkema.ru/images/2015_09_20_iphone_155_x400.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-position: top left; 
 
    background-size: 100% auto; 
 
} 
 

 
@media (min-width: 721px) { 
 
    body { 
 
    background-color: #303441; 
 
    background-image: url('http://glebkema.ru/images/2015_09_26_iphone_198_x400.jpg'); 
 
    } 
 
}