在标题下添加横幅图像

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>