html - CSS 背景图片未出现在网站上

Question

我正在使用 CSS 和 HTML 构建网站。我要为我的网站添加背景图片。问题是，图片没有显示为网站的背景。

我的 CSS 代码:

.bg {
  background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
  height: 50%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}

<div class="bg"></div>

请问我是否需要我网站的更多代码。

Edit: This is not a clone, I've tried every other solution that I've come across on here, and nothing works.

Answer 1

如果您使用 fixed height:

，这会很好地工作

在下面的例子中，我使用了 100px;

  .bg {
    background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
    height: 100px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: repeat-x;
    background-size: cover;
  }

<div class="bg">

</div>

但是如果你想让它成为 100% 的屏幕，你总是可以使用 100vh

.bg {
  background: url('https://ak9.picdn.net/shutterstock/videos/12047219/thumb/10.jpg?i10c=img.resize(height:160)');
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}

<div class="bg">

</div>

如果您想了解有关vh 的更多信息，请访问此 link

希望对您有所帮助。