在标题下添加横幅图像

Question

我正在尝试在我的网站标题下添加横幅，但无法弄清楚如何做到这一点。请参阅图片以供参考。

当我尝试添加图像时，它将像标题下的菜单的背景图像一样 - 而不是我想要做的事情。我想要一个固定的横幅。

这是我添加的CSS，但它就像标题下的菜单背景。

.nav-secondary .wrap {
    background: url( https://dreaminginyellow.com/diy-custom-design-yellow-strips/) bottom center no-repeat;
}

有什么建议？谢谢！

Answer 1

我想你想做这样的事情？

.container {
  text-align: center;
  max-width: 500px;
  margin: 0 auto;
}

.banner {
  height: 100px;
  background: url(https://dreaminginyellow.com/diy-custom-design-yellow-strips/) bottom center no-repeat
}

<div class="container">
  <header>
    <h2>Header Text</h2>
  </header>
  <div class="banner"></div>
  <div class="content">
    <h3>Content</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
    </p>
  </div>
  <div class="banner"></div>
</div>