Фоновое изображение на домашней странице не работает?

Question

Фоновое изображение не работает, пока я установил опцию на 100%.

Я использую angular и bootstrap 4.

<!--html code-->
<div class="bg">
<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<router-outlet></router-outlet>

это код .scss

body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("~/assets/jonatan-pie-226805-unsplash.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

Answer 1

вы можете использовать vh сотых от высоты области просмотра.Эти единицы позволяют вам указывать размеры в процентах от ширины области просмотра и высоты области просмотра. подробнее нравится https://jsfiddle.net/L34zcpkt/1/

    body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("https://images.pexels.com/photos/556416/pexels-photo-556416.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");

    /* Full height */
    height: 100vh; // here 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

другие коды такие же

Answer 2

Я скопировал ваш код и добавил картинку, и она работает ниже.

Используете ли вы что-нибудь, что неявно сохраняло бы небольшой фон? Может быть, бутстрап?

body, html {
    height: 100%;
  }

  .bg {
    /* The image used */
    background-image: url("https://www.placecage.com/g/1000/500");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!--html code-->
<div class="bg">
<div style="text-align:center">
  <h1>
    Welcome
  </h1>
</div>
<router-outlet></router-outlet>