Фон HTML / CSS не совпадает на других экранах

Question

Я делаю домашнее задание по HTML / CSS для своей школы, и теперь у меня проблема с фоном в заголовке, который не соответствует другим размерам экрана.

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(photo.jpeg);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

<header>

  <div class="row">
    <div class="logo">
      <img src="logo.png">
    </div>
    <ul class="main-nav">

      <li class="active"><a href=""> HOME </a></li>
      <li><a href=""> SERVICES </a></li>
      <li><a href="../Web/about.html"> ABOUT </a></li>
      <li><a href=""> CONTACT </a></li>
      <li><a href=""> NEWS </a></li>
      <li><a href=""> FAQ </a></li>

    </ul>

  </div>

  <div class="hero">
    <h1>Overcome Yourself</h1>

    <div class="button">
      <a href="" class="btn btn-one"> Watch Video </a>
      <a href="" class="btn btn-two"> Explore More </a>
    </div>
  </div>

</header>

Answer 1

Попробуйте это:

html{ 
 margin:0;
 padding:0;
 background: url(image.jpg) no-repeat center fixed; 
 -webkit-background-size: cover; /* for old firefox / Safari */
 background-size: cover; /* standard version */
}

РЕДАКТИРОВАТЬ: Можете ли вы попробовать это решение, применив код CSS к тегу html? Совпадает ли это с вашей проблемой?