html - CSS如何将横幅图像调整为整个页面？

Question

这是我的仓库的链接 trevormolano.bitbucket.io

我需要创建

我在尝试创建横幅时遇到问题。如何调整它的大小以使其扩展到整个页面？我也尝试过将 background-image 用于 CSS，但效果不佳。它在顶部显示为一条条子。我一直在努力让它工作，但这是我到目前为止所拥有的:

<header>
  <!-- // Logo / Banner -->
  <a href="index.html"><img src="images/cycleWorld.png" alt="CycleWorld Logo" id="logo"></a>
  <div id="bannerbox">
    <img src="images/banner.jpg" id="banner"/>
  </div>
  <!-- Logo / Banner // -->
  <nav>
    <!-- // Navigation Bar -->
    <ul>
      <li><a href="index.html">Home</a> </li>
      <li><a href="shop.html">Shop</a> </li>
      <li><a href="clubevents.html">Club Events</a> </li>
      <li><a href="">Blog</a> </li>
      <li><a href="">Contact</a> </li>
      <li><a href="">My Cart</a> </li>
    </ul>
  <!-- Navigation Bar // -->
  </nav>
</header>

但是我不想在 HTML 上有图像，我想用 CSS 添加它。

Answer 1

从 HTML 中删除图像并重构 css 中的 #bannerbox:

#bannerbox {
    display: grid;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    min-height: 60vh; 
/*  ^^ set this to the desire height in whatever unit px, etc. */
    background-image: url(../images/banner.jpg); 
/* ^^ check the path to the image, depends how you are serving your site*/
    background-size: cover;
    background-repeat: no-repeat;
}

请记住，您是从您的 css 调用 background-image 而不是您的 html，因为图像位置是 images/banner.jpg 而您的 css 是 css/home.css 从 css 调用时，您需要进入一个文件夹，然后进入图像文件夹。但是一旦在线你可以直接调用background-image: url(/images/banner.jpg);因为/是你的root网站。