另一个 CSS 背景图片未显示，是我的代码有误吗？

Question

大家好，

我一直在寻找解决这个问题的地方。但我不能，这让我相信还有其他事情正在发生。让我们看看。

我想为我的 Wordpress Bootstrap 网站上的横幅编写代码。 www.visionalmind.com 这个横幅应该放在导航栏的正下方，为此我在一个全宽容器内制作了一个。 class 包括图像本身。

我的愿望是制作这样的横幅： https://www.w3schools.com/Css/tryit.asp?filename=tryresponsive_image_background3

这是 header_banner 的 CSS:

.header_banner{
  max-width: 100%!important;
  margin: auto!important;
  width: 100%!important;
  max-height: 1080px!important;
  background-repeat: no-repeat!important;
  background-attachment: fixed!important;
  background-size:cover!important;
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');
}

HTML:

<div class="container-fluid bg-darkblue">
  <div class="row mt-5">
    <div class="container pad_over">
      <a class="header_banner"></a>
    </div>
  </div>
</div>

我尝试了以下方法。

尝试使用 'background' 属性代替 'background-image' 属性.
尝试使用 HTML 而不是使用这有效，但我得到拉伸问题。我乐于接受想法。
我已经在我的 url 栏中加载了 URL 以检查图像是否有效。

Answer 1

这里有一些小问题。您试图将背景附加到“a”标签而不是“div”，并且您也没有为其指定高度。

#headerBanner {
  width: 100%;
  height: 400px;
  max-width: 100%;
  max-height: 1080px;
  background-image: url('https://www.visionalmind.com/wp-content/themes/visionaltheme/media/photo-1499951360447-b19be8fe80f5.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<div class="container-fluid bg-darkblue">
  <div class="row mt-5">
    <div class="bannerContainer pad_over">
      <div id="headerBanner"></div>
    </div>
  </div>
</div>

检查它在 JSFiddle

上是否正常工作

另一个 CSS 背景图片未显示，是我的代码有误吗？

Another CSS background image not showing, is my code wrong?

html

css

wordpress

background-image

twitter-bootstrap