Неправильное поведение реагирующих фоновых изображений

Question

Я впервые делаю школьный проект, где мне нужно, чтобы мой сайт был адаптивным.Я следую за "мобильным первым".В stackoverflow я скопировал хороший способ сделать фоновые изображения отзывчивыми:

background-image: url(./assets/img/bg-blue-sm.png); background-repeat: no-repeat; background-size: cover; background-position: center;

однако, они ведут себя очень странно, когда я увеличиваю размер экрана.Как я могу это исправить?Вы можете увидеть поведение здесь: https://imgur.com/a/HhkXGA8

.container {
  display: inline-block;
  cursor: pointer;
  background-color: var(--beige);
  border-radius: 100%;
  padding: 2rem;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: var(--pink);
  margin: 6px 0;
  transition: .4s;
  border-radius: 1rem;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.navigatie {
  text-transform: uppercase;
  font-family: 'Abrade Heavy';
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image: url(./assets/img/nav-sm.png);
  background-repeat: no-repeat;

  background-size: cover;
  background-position: center;

  padding: 1rem .5rem;
}

.navigatie li:nth-child(2) {
  margin-top: -2rem;
}

a {
  text-decoration: none;
  list-style: none;
  color: var(--beige);
}

.header {
  background-image: url(./assets/img/header-bg-sm.png);
  background-repeat: no-repeat;

  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 40rem;
  padding-top: 8rem;
  margin-top: -7rem;
}

.hide {
  display: none;
}

.date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 10rem;
  margin-top: 2rem;
}

.date-txt {
  font-family: 'Abrade Heavy';
  text-transform: uppercase;
  color: #b3b3b3;
  font-size: 1.5rem;
  margin: 0;
}

.intro-article {
  background-image: url(./assets/img/bg-blue-sm.png);
  background-repeat: no-repeat;

  background-size: cover;
  background-position: center;
  height: 40rem;
  margin-top: -11rem;
  padding-top: 8rem;
}

<header>
            <ul class="navigatie">
              <li><a href=""><img src="./assets/img/logo-sm.png" alt=""></a></li>
              <li><a href="">programmatie</a></li>
              <li>
                  <div class="container" onclick="myFunction(this)">
                      <div class="bar1"></div>
                      <div class="bar2"></div>
                      <div class="bar3"></div>
                    </div>
              </li>
            </ul>

              <div class="header">
                  <h1 class="hide">INTERNATIONAAL STRAATTHEATER</h1>
                  <img src="./assets/img/titel.png" alt="IBS header background">

                  <div class="date">
                      <p class="date-txt">alle ogen gericht op</p>
                      <img src="./assets/img/datums-sm.png" alt="VRIJ 24/08 ZAT 25/08 ZO 26/08">
                  </div>
              </div>
          </header>

          <main>
            <article class="intro-article">
              <h2 class="hide">een wereld vol fantasie</h2>
              <img src="./assets/img/wereld-sm.png" alt="Een wereld vol fantasie">
              <p class="intro-txt">Een arsenaal aan gekke wezens of vriendelijke gastheren nodigen u nu al uit op een weekend vol verwondering en bewondering. Een combinatie van walking acts en tentoonstellingen zorgen voor een onvergetelijke ervaring.</p>
            </article>
          </main>

Answer 1

Так работает cover.

cover говорит браузеру, чтобы изображение всегда покрывало весь контейнер, даже если оно должно растягивать изображение или вырезать немного по одному из краев. - CSS Tricks

В вашем случае, когда вы расширяете экран, изображение пытается покрыть всю ширину, вырезая с высоты.

Проверьте предоставленную мною ссылку для других значений свойства background-size, чтобы найти значение, соответствующее вашим потребностям.