尝试使用HTML/CSS在透明导航栏下获取图像

我正在学习使用HTML和CSS进行web开发。我一直在学习教程。到目前为止，我已经修改了教程以匹配我希望它使用的内容。我在顶部有一个导航栏和一个基本的页脚。我想看看我是否可以加载一个图像，大约800x600，它在导航栏后面，通过透明度显示。如果可能的话，我希望图像拉伸窗口的大小，类似于我设置导航栏的方式。我似乎遇到的问题是，我试图放置在导航栏后面的图像实际上是在导航栏上方渲染的。请参阅下面的代码了解我正在做什么

CSS样式：

/* PAGE TOP */
#pageTop {
    background: url('./img/transparentgradient.png') repeat-x;
    height: 90px;
}
#pageTop >  #pageTopImg {
    text-align: center;
}

HTML:

提前谢谢你的帮助。由于这是我对HTML/CSS的介绍，请让我知道我是否遗漏了什么或需要更多细节

编辑

---

添加了演示的链接。导航栏呈蓝色，您可以看到图像显示在导航栏上。

通常背景图像更适合此用途，但通过链接到实际页面更容易建议。您应该将图像设置为div的背景（要拉伸图像的div），之后，您可以在css中使用此属性：背景大小：100%

<div id="pageTop">
  <div id="pageTopImg">
    <img src="./img/dnd_dragon_photo.jpg"/>
  </div>
  <div id="pageTopWrap">
    <div id="pageTopLogo">
      <a href="#">
        <img src="./img/DnD_logo.png" alt="logo" title="Dungeons and Dragons">
      </a>
    </div>
    <div id="pageTopRest">
      <div id="menu">
        <div>
          <a href="#">Load character sheet</a>
        </div>
      </div>
    </div>
  </div>
</div>