无法为HTML中的特定DIV添加背景图片

Question

我有一个类似以下的网页：

我正在尝试在下面的标记部分添加一个小的背景图像：

我尝试了以下用于DIV的代码

.king {
background-image: url(../img/banner-lg.jpg);
}

<div class="king">
</div>

但是背景图片没有显示，任何人都可以帮我这个忙。

Answer 1

尝试这样写：-

.hero-image {
      background-image: url("/images/photographer.jpg");
      background-color: #cccccc;
      height: 500px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
}

Answer 2

您可以使用以下代码来设置背景图像。

.king {
background-image: url('../img/banner-lg.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
            /* (853 / 1280 * 100) */

}

Answer 3

如您在我的代码段中看到的，如果您为div设置了一些width和height静态值，则会显示图像。

请确保您的div具有高度，以便他可以显示您的图像。

请确保图像url（）已更正，是否尝试显示外部图像，例如http://via.placeholder.com/200x200

.king {
  background-image: url("http://via.placeholder.com/200x200");
  /*If you comment background-repeat the image will be repeated*/
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  /*if you comment width and height you just see a grey line taken by <p> tag
    if you comment the <p> you don't see nothing*/
}

<div class="king">
  <p> Some text Here </p>
</div>

一些好的资源：

https://www.w3schools.com/cssref/pr_background-image.asp https://developer.mozilla.org/it/docs/Web/CSS/background-image

PS：我在资源中看到表单是url('the_path_image') ...您尝试使用''吗？

编辑

添加一个没有重复图像的示例。

现在容器div为500x500，图片为200x200。

如果我们对background-repeat: no-repeat;进行注释，则会在整个div区域重复图像

Answer 4

尝试一下

HTML

<div class="king"></div>

CSS

.king {
  background: url("url") no-repeat;
  display: block;
  position: relative;
  width: 20%;
  height: 100px;
  padding-bottom: 20%;
  background-size: 100%;
}