如何讓背景圖像覆蓋整個 div？

Question

嘿家伙，我是 css 和 html 的新開發人員，現在我不知道是我的電腦還是我的代碼給了我問題。 我試圖得到它，所以 Tayler Swift 和她的朋友們的照片占據了“header_slogan_title” div 的全部背景。 div 需要 700px 的高度並填充頁面的寬度。 我的代碼如下。

<header>
    <div class="header_title">
      <div class="title">
        <h1 class="title">Fashist Fashion</h1>
      </div>
      <div class="title_opt">
      <nav>
         <a href="#header_slogan_title">Mission</a>
         <a>Featured Clothing Lines</a>
         <a>Locations</a>
       </nav>
     </div>
    </div>
    </header>
    <div class="header_slogan_title">
      <h2>Our Mission</h2>
      <h4>To bring creative, hunger driven, freely forced apon, high fashion to all comrads</h4>
    </div>
------------------------------------------------------
html{
    background-color: red;
}


.header_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.title_opt a {
    margin-right: 10px;
}
.header_slogan_title{
    text-align: center;
    height: 700px;
    width:100%;
    background-image: url(../Anarchy_Web/pics/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

Answer 1

你的代碼是正確的。 嘗試在此處檢查文件路徑：

background-image: url(../Anarchy_Web/pics/banner.jpg);

您可以通過替換為外部鏈接來檢查：

background-image: url(https://image.insider.com/5dcebbb779d7570274675e72?width=1100&format=jpeg&auto=webp);

https://codepen.io/opmasan/pen/MWaZxWY