Фоновое изображение Jumbotron не синхронизировано с фоновым изображением HTML

Question

Я хочу покрыть свою страницу фоновым изображением, и я использую jumbotron, который охватывает все компоненты страницы, но его размер не охватывает всю страницу.Итак, я также прикрепил фоновое изображение к .html в моем CSS-файле.

    .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 {
  margin: 0;
  height: 100vh;
  background-image: url(background.jpg);
  background-size: cover;
  background-position: center;
}

Answer 2

Вы можете применить фоновое изображение к тегу тела.

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