How to make different background-images for the body tag for different screen widths?

Question

css

A print designer was the first to design for a website. The number of all sorts of ruffles goes off scale, and most importantly, he didn’t know anything about narrow screens...) At a size of more than 1200px (col-lg-*), everything turns out more or less. If the screen is smaller (col-md-*), the main background (the pride of the designer) should be replaced with a more neutral picture, otherwise the whole hand-drawn design falls apart... picture and set the background color to #000.

Answer 1

As I understand it, it was made up on Bootstrap? This framework is mobile-first, which means mobile first, and then everything else in ascending order. Accordingly, without media , the background is adjusted for the smallest screens, which are up to 320px, and then added incrementally through media using standard bootstrap or your own points.

body {background-color: #000;}

@media only screen and (min-width: 480px) {

/* Можете не менять тут, это горизонтальный iPhone или похожий мобильник */

} 

@media only screen and (min-width: 768px) {

/* Добавляем картинку для вертикального iPad или подобного */
body {background-image: url(bg-image-sm.jpg);}

} 

@media only screen and (min-width: 992px) {

/* Заменяем картинку для горизонтального iPad или подобного */
body {background-image: url(bg-image-md.jpg);}

} 

@media only screen and (min-width: 1200px) {

/* Заменяем картинку для больших экранов */
body {background-image: url(bg-image-lg.jpg);}

}