Bootstrap - Различные фоны изображений для разных точек останова ... где ошибка?

Question

Я хочу отображать два разных фоновых изображения на устройство, иметь код, но он не работает должным образом ...

где ошибка?

@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

Просто любопытно, почему вы смешивание мин-ширина и максимальная ширину?

Обычно max-width используется при ориентации на рабочий стол сначала, а затем работает на мобильном устройстве.

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'); 
 
    } 
 
}

Вот хорошее видео YouTube 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'); 
 
    } 
 
}