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

如何使背景图片覆盖整个div？

1 个答案: