CheapThailand
@CheapThailand
учусь путешествовать

Как сделать разные background-image у тега body для разных ширин экранов?

Полиграфический дизайнер впервые делал дизайн для сайта. Количество всяких рюшичек зашкаливает, и главное — он ничего не знал про узкие экраны...) При размере более 1200px (col-lg-*) всё более менее получается. Если экран меньше (col-md-*) главный бэкграунд (гордость дизайнера) надо бы заменить на более нейтральную картинку, иначе весь рисованный дизайн рассыпается...(((( При совсем маленьких (col-sm-*) надо бы вообще убирать картинку и ставить цвет фона #000.
  • Вопрос задан
  • 1330 просмотров
Решения вопроса 1
Kiriniy
@Kiriniy
Графический и веб-дизайнер
Я так понимаю, верстали на 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);}

}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы