Я так понимаю, верстали на Bootstrap? Этот фреймворк mobile-first, это значит сначала мобильные, а потом всё остальное по возрастанию. Соответственно, без
media настраивается фон под самые маленькие экраны, которые до 320px, а потом добавляется по нарастанию через
media по стандартным bootstrap или вашим собственным точкам.
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);}
}
