如何使用相同的背景图像对齐 2 个堆叠元素，使其看起来像一个图像

Question

我网站主页的标题由以下布局组成：

<header>
  <div class="navbar-lock"></div>
  <div class="hero"></div>
</header>

其中div.navbar-lock是初始高度为 90px 的固定导航，div.hero包含一些标题文本。在视觉上，我想给出一个背景图像（2000px x 481px）跨越两者的高度和宽度的外观。滚动时，固定导航栏的背景将是图像的前 90 像素;当滚动位置回到页面顶部时，标题再次显示为一个背景图像。

我尝试过：

方法A：

header {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
  background-size: cover;
}
div.navbar-lock {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
  background-size: cover;
  min-height: 90px;
  padding-top: 20px;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}

方法 B（将图像裁剪为 2）：

div.navbar-lock {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 0;
  background-size: cover;
}
div.hero {
  background: #F60 url(../images/header_bg.jpg) no-repeat 0 -90px;
  background-size: cover;
  position: relative;
  top: 90px;
  padding: 80px 0 134px; // padding to properly position its text
}

但是在两次尝试中，我都无法使图像正确排列。我在这里错过了什么？

Answer 1

我会把标题和英雄div的放在父div中。并将图像放在父div 上。