Как заменить фоновое изображение заголовка на мобильный - bootstrap - PullRequest
Новая
       32

Как заменить фоновое изображение заголовка на мобильный - bootstrap

0 голосов
/ 24 февраля 2020

Я не могу понять, как обслуживать другое изображение для мобильных пользователей - мой баннер слишком мал для чтения. Я немного новичок в этом. Мне удалось разместить изображение баннера там, где оно должно быть, используя bootstrap, с помощью следующего css кода: 

  .jumbotron{
    margin-top: 5px;
    background-image: url(obr/head.jpg);
    background-size: cover;
    height: 100%;
    background-size:100% auto;
    background-repeat: no-repeat;
    min-height: 320px;
  }

и html

<header class="jumbotron">

</header>

Обратите внимание, что я пришлось установить min-height: 320px; потому что это был единственный способ отобразить баннер в правильном размере (кроме добавления br в тег заголовка). На мобильных устройствах баннер мал для чтения, а также создает пустое пространство из-за минимальной высоты.

Я пытался показать другое изображение для мобильных пользователей, используя этот код css: 

/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
.jumbotron{
background-image: image-url("obr/head_mobile.png");
}
}
/* Medium Devices, Desktops */
#media only screen and (min-width : 992px) {
  .jumbotron{
  background-image: image-url("obr/head.jpg");
}
}
/* Large Devices, Wide Screens */
#media only screen and (min-width : 1200px) {
  .jumbotron{
  background-image: image-url("obr/head.jpg");
}
}

но не повезло. Может кто-нибудь помочь мне разобраться с этим? Я предпочитаю легко следовать шагам. Большое вам спасибо.

1 Ответ

0 голосов
/ 24 февраля 2020

Медиа-запросы не начинаются с #, они запускаются знаком @.

background-image: image-url("obr/head_mobile.png"); is не собственность Используйте background-image: url("img-path");. Тогда все будет работать нормально.

ПРИМЕР 

@media only screen and (max-width: 500px) {
  body {
     background-color: blue;
  }
}

Ваш код исправления: 

 /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        .jumbotron {
            background-image: url("obr/head_mobile.png");
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        .jumbotron {
            background-image: url("obr/head.jpg");
        }
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .jumbotron {
            background-image: url("obr/head.jpg");
        }
    }

Подробнее о медиазапросах: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

.

См. Рабочий код здесь: https://codepen.io/manaskhandelwal1/pen/NWqdOPZ

...