Увеличение / уменьшение фонового изображения при изменении размера страницы браузера

Question

В настоящее время я разрабатываю нижний колонтитул веб-страницы в HTML / CSS. Этот нижний колонтитул будет содержать множество элементов (адрес, ссылки, кнопки и т. Д.), Поэтому он должен быть отзывчивым. Следовательно, в настольной версии у нас есть все элементы нижнего колонтитула в строке, а затем на мобильных устройствах у нас есть все элементы нижнего колонтитула в столбце (как показано на следующих изображениях);

Моя цель - получить результат ниже на широкоэкранном (рабочем столе):

And here is the result I want to achieve on a mobile screen:

.footer {
  height: 639px;
  background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="footer"></div>

Результат почти такой, как я хочу, но проблема в том, что высота нижнего колонтитула не меняется, и поэтому я не в мобильной версии достаточно места для размещения всех моих элементов в футере.

Спасибо :)

Answer 1

Попробуйте добавить height: auto, padding-top, padding-bottom в медиа-запрос для телефона. Возможно, вам придется поэкспериментировать со значениями отступов несколько раз, чтобы все выглядело хорошо. Также измените background-position, чтобы кривую можно было увидеть на мобильных телефонах. Это будет выглядеть примерно так.

@media (max-width: 991.98px){
.footer{
  height: auto;
  padding: 50px 0;
  background-position: center top; 
 }
}

Answer 2

@media screen and (min-width: 480px) { //480px is breakpoint you can adjust according to your need

    .footer {
      height: auto;
      background: url("https://nsa40.casimages.com/img/2020/07/11/200711012945662645.png");
      background-position: center top; //adjust according to you need
      background-repeat: no-repeat;
      background-size: cover;
      padding-top: 3rem; //adjust according to your need
      padding-bottom:3rem; //adjust according to your need
      padding-left:inherit;
      padding-right:inherit;
    }
}

<div class="footer"></div>