Bootstrap - Different image backgrounds for different breakpoints... where is a bug? - css

Question

I want to display two different background images per device, have a code, but it doesn't work properly...
where is a bug?
#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

Check the path to your first image. My images work as it should.
And I agree with Dan Weber, the code can be simplified:
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');
}
}

Answer 2

Just curious, why are you mixing min-width and max-width?
Usually, max-width is used when targeting desktop first and then working down to mobile.
min-width is used to target mobile first and work your way up to desktop.
http://www.the-haystack.com/2015/12/23/choosing-between-min-and-max-width/
I've changed the exact screen size a bit since 1px is harder to get difference on when resizing, but same concept. Run this in full page mode.
So, everything lower than 720 (mobile first) gets first image by default. When screen hits 720 it changes and then again at 820 and up.
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');
}
}
Here is good youtube video explaing difference between min-width and max-width.
https://www.youtube.com/watch?v=Gi3INcPOvo8