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

Question

[Сергей Кузнецов]

Полиграфический дизайнер впервые делал дизайн для сайта. Количество всяких рюшичек зашкаливает, и главное — он ничего не знал про узкие экраны...) При размере более 1200px (col-lg-*) всё более менее получается. Если экран меньше (col-md-*) главный бэкграунд (гордость дизайнера) надо бы заменить на более нейтральную картинку, иначе весь рисованный дизайн рассыпается...(((( При совсем маленьких (col-sm-*) надо бы вообще убирать картинку и ставить цвет фона #000.

Answer 1

[Кирилл Никитин]

Я так понимаю, верстали на 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);}

}

Comments

[Алексей Бульба]

Без медиа, настраивается на все экраны. Mobile-first фреймворк что? :) Вначале для responsive верстки , а кой способ выбрать "вначале мобильные" или наоборот , дело каждого.

[Кирилл Никитин]

Xserber: ну и как это сделать без медиа? Человек привёл стандартные классы сетки Bootstrap, который mobile-first. Верстать mobile-last макет на mobile-first фреймворке как минимум странно, а как максимум — путаница и непредсказуемое поведение при масштабирование.

[Алексей Бульба]

mobile-first фреймворк что? (ещё раз). Bootstrap позиционировал себя всё время как responsive , да и он вышел раньше чем упоминули за бугром mobile-first. Следовательно каким способом верстать вначале мобильный или с десктопов , решается под каждую задачу отдельно. А называть bootstrap mobile-first фреймворк грешно( даже для убеждения зайти на офф сайт и прочитать первые предложения). По существу не проще ли сделать резиновый фон и только в media 320px указать фон в #000.

[Кирилл Никитин]

Xserber: что — что? Bootstrap! Вы просто заблуждаетесь в определениях. Да, сначала была резина, но у нас тут уже 2015 к концу подходит, знаете ли. Какая разница каким он был в начале? Раньше вообще верстали не на дивах, а в таблицах и что теперь? Сомневаюсь, что топикстартер использует первый Bootstrap, а теперь, в 3 версии, он mobile-first. Сами и прочитайте первые предложения на их сайте. Значит без медия таки не получится? Ну надо же. Угу, вот только спрашивали как сделать разные фоны на разных размерах, а не как сделать сайт из нулевых.

[Алексей Бульба]

Про media, что их не употреблять ни кто не говорил или мерещится ?) Пеевод: "Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов.
Bootstrap использует самые современные технологии CSS и HTML." Сейчас уже bootstrap 4 начинается и да здравствует flexbox и батька SASS. И начинало начал, может будет шоком для вас, использовали верстку без td и tr.

[Роман Макаров]

Xserber: Основной заголовок с getBootstrap: "Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web."
Вы о чем вообще? Кирилл все правильно написал.

[Кирилл Никитин]

Xserber: про media, в начале вашего первого комментария. Я вообще не понимаю, зачем вы влезли сюда с какой-то своей философией и начали отсебятину нести.

[Сергей Кузнецов]

Други! Спасибо за все комментарии. Любите друг дуга, улыбайтесь и не надо ссориться. Просто видимо каждый понимает это чуть-чуть по-своему. Главное, что код работал. КИРИЛЛУ НИКИТИНУ - особое спасибо. Чё-то я затупил.. надо было бы сразу всё в медиа и засунуть!

[Сергей Кузнецов]

Кирилл Никитин: Кирилл, приветствую! Сайт делаю, перенес бэкграунды в media. Но если в мозилле или опере просматриваю с масштабированием ( + <->), то фон исчезает...((( Не вкурсе, почему такой баг ?