Вот еще одно предложение для вас.
То, что вы пытаетесь сделать, нелегко, потому что вы хотите, чтобы ваш дизайн работал на всех видовых экранах или экранах, и в то же время у вас есть некоторая текстовая информация, которая всегда должна быть видна.
Вот одно предложение для вас:
https://codepen.io/panchroma/pen/Lmjwyv
Важные биты:
(1) Вы хотите добавить метатег видового окна в заголовок документа, чтобы смартфоны не масштабировали содержимое по размеру экрана
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Подробнее о метатегах области просмотра здесь
(2) Измените расположение фонового изображения слева внизу, тогда критический текст останется в поле зрения в других окнах просмотра
background-image: url(images/ComingSoon.jpg);
...
background-position:left bottom;
...
}
(3) Основываясь на том, что вы начали, создайте фоновое изображение второго портретного формата для мобильных устройств, а затем используйте медиазапрос, чтобы показать его под любым окном просмотра, наиболее подходящим для вашего дизайна
@media screen and (max-width: 600px) {
/* Small screen, non-retina */
.bgimg {
background-image: url(images/ComingSoon_Small_Portrait.jpg);
background-size: contain;
}
}
Вот пример того, о чем я думаю
Размер фона не обязательно должен быть «содержать», я просто иллюстрирую, что он может отличаться от настроек для рабочего стола.
Удачи!