How to get a background color to fill the entire page

I'm trying to practice building a website using Angular and I'm trying to fill the background with a color gradient. However, when I set the css to fill the background it only goes up till the div container. How do I get the entire page to fill with the gradient in under the html style tag.

index.html:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tutorial3</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>


app.component.html:


<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card bg-custom-1">
<div class="card-body">
<h2 class="card-title text-left text-white py-3">Tutorial3</h2>
<ul class="text-left list-inline py-3">
<li class="list-inline-item">
<a routerLink="/games" class="btn btn-info">List</a>
</li>
</ul>
</div>
</div>
<router-outlet></router-outlet>
</div>
</div>
</div>


styles.css:


html{
height:100vh;
background-image: linear-gradient(rgb(60,43,91), rgb(153,39,77));
background-repeat: no-repeat;
background-size:100%;
}


app.component.css:

.bg-custom-1{
background-image: linear-gradient(rgba(46,37,56,1),rgba(46,37,56,0.75))
}


website: enter image description here

I tried placing the gradient on the html and a separate gradient on the div so that it would blend in, but the space around the header is just white.

Continue reading...