在标题下添加横幅图像

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>