Jumbotron 背景图片与 HTML 背景图片不同步

Question

我想用背景图片覆盖我的页面，并且我正在使用一个覆盖页面所有组件但它的大小不覆盖所有页面的 jumbotron。因此，我还在我的 css 文件中的 .html 中附加了一个背景图片。

    .jumbotron {
  padding: 1rem 1rem;
  background-color: #e9ecef;
  height: 100%;
  background-size: cover;
  background-image: url('background.jpg');
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-image: url('background.jpg');
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

现在，图像看起来像一面破碎的镜子。我怎样才能让它看起来像一个单一的图像？或者这样做的合乎逻辑的方式是什么？

Answer 1

你可以在body标签上应用背景图片。

body {
      width:100%;
      background-image: url('background.jpg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
}

Answer 2

你可以试试这个，

body {
  margin: 0;
  height: 100vh;
  background-image: url(background.jpg);
  background-size: cover;
  background-position: center;
}