全屏背景图像与中心文本和滚动

Question

我制作了一个单页网站，其中还有一个同轴滚动的全屏幕背景图片。

Here's an example page。

Here's a git repo with all the code

在桌面屏幕上，此代码将始终完美运行。

HTML：

<section class="test">
  <header>
  Horizontally and vertically centered text
  </header>
</section>

CSS

.test {
  background: url('img.jpg') no-repeat center center;
  background-size: cover;
  padding: 20px 0;
  height: 100vh;
}

header {
  position: relative;
  top: 38%;
  transform: translateY(-38%);
}

38％特别适合这种情况，很可能是因为我上面有一个导航栏。我知道50％会更有意义，也许有人可以进一步解释。

无论如何，尽管它在我调整大小的屏幕上看起来很好，如果我真的在手机上看它，它看起来很糟糕。为了解决这个问题，我更改了代码以在标题周围添加@media screen and (min-width: 600px) {}，因此在较小的屏幕上没有应用代码。这是当前的代码。

它看起来不错，但感觉很乱，而且不精确，所以我想知道是否有更好的方法可以做到这一点，我很想念。显然我不能使用position: fixed，因为网站涉及滚动;如果网站是一个没有滚动的全屏图像，我可以使用固定定位。

任何帮助将不胜感激！感谢。