Евгений

<div class="header" style="background-image: url(<?php the_field('bg1'); ?>)"></div>

.header {
  background: top center / cover;
  color: #fff;
  padding-bottom: 190px;
}

Гуглите svg mask

Видимо вы плохо сверстали, у меня на ноуте так же

https://www.google.com/search?q=%D0%9A%D0%B0%D0%BA...

Лучше и быстрее разобраться в теме. А не отвечать о том, чего не знаете.
Представьте, что человека оперировал бы хирург, которого взяли на работу только по тому, что ему ответил на форме медицинском, а не потому, что он разбирается в теме

var scrollTop;
$(window).scroll(function () {
    scrollTop = $(this).scrollTop();
    // code here
});

Поставить эти скрипты вниз страницы и использовать async

Воспользоваться силой css

Посмотреть как там реализовано и реализовать

https://jsfiddle.net/gu2s3x4y/

.bg {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

Сталкивался с таким дизайном и дизайнерами, которые такое рисуют - больше с ними не работаем

#main .chat {
    height: auto;
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    /* display: flex; */
    /* flex-direction: column-reverse; */
}

Тык

Почему бы не использовать 1 фреймворк? Ведь завтра вам может понравится кнопка из другого фреймворка, вы и его подключите?

Вставляйте просто img без всяких source.
А вот для слайдера (например на главной странице), если есть такая возможность, то можно использовать source, чтобы на десктопе показать широкую картинку, а на мобиле вертикальную.