Background image in home page is not working? - html

Question

The background image is not working while I set the option to 100%.
I'm using angular and bootstrap 4.
<!--html code-->
<div class="bg">
<div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<router-outlet></router-outlet>
this is the .scss code
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

I copied your code and added a picture and it works below.
Are you using anything that would implicitly keep the background small? Maybe a bootstrap?
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>