Как сохранить div в том же месте на фоне при изменении размера?

Question

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

Вот моя разметка.

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: url("https://resize-elle.ladmedia.fr/rcrop/638,,forcex/img/var/plain_site/storage/images/beaute/maquillage/tendances/beaute-la-vraie-signification-des-emojis/le-smiley-qui-porte-des-lunettes-de-soleil/54410296-1-fre-FR/Le-smiley-qui-porte-des-lunettes-de-soleil.jpg") no-repeat fixed;
    background-size: cover;
    background-position-x: center;
}

.center {
    text-align: center;
    margin-top: 10rem;
}

<header>
  <div class="center">
    <h1>TITLE</h1>
  </div>
</header>

Попробуйте изменить значение верхнего края поля так, чтобы заголовок располагался чуть выше очков. Теперь, когда вы изменяете размер окна, я хотел бы, чтобы заголовок оставался приблизительно или, если возможно, точно над очками. И по некоторым причинам я не хочу, чтобы background-position-y был установлен в центр. Есть ли способ сделать это?

Проблема близка к этой Div всегда в одном месте фонового изображения? но это не работает.

Answer 1

Я не уверен, что есть хороший способ сделать это, но играя с медиа-запросами, вы можете получить нормальный результат.

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: url("https://resize-elle.ladmedia.fr/rcrop/638,,forcex/img/var/plain_site/storage/images/beaute/maquillage/tendances/beaute-la-vraie-signification-des-emojis/le-smiley-qui-porte-des-lunettes-de-soleil/54410296-1-fre-FR/Le-smiley-qui-porte-des-lunettes-de-soleil.jpg") no-repeat fixed;
    background-size: cover;
    background-position-x: center;
}

.center {
    text-align: center;
    margin-top: 20vw;
}

@media only screen and (max-width: 638px){
  .center {
    text-align: center;
    margin-top: 20vh;
  }
}

@media only screen and (max-height: 450px){
  .center {
    text-align: center;
    margin-top: 20vw;
  }
}

<header>
  <div class="center">
    <h1>TITLE</h1>
  </div>
</header>