HTML/CSS background image issues

I am currently trying to test how to completely cover my Angular web page with an image background. I've looked into numerous examples online on how to get this to happen. This is what I've come up with in my .html and .css code:

<main class="mainPage">
      <router-outlet></router-outlet>
    </main>

html, body{
  height: 100%;
  /*font-family: Arial, Helvetica, sans-serif;*/
  width: 100%;
  margin: 0px;
  padding: 0px;
  border: 0px;
  min-height: 375px;
 }

 .mainPage {
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background: url(/assets/images/background.png) no-repeat center center fixed;
   background-size: cover;
 }

main {
  height: 100%;
  width: 100%;
}

I'm under the impression that this is how you are supposed to define your CSS if you want an image to cover the background of the screen. However, when I run this with npm start and traverse to localhost:4200, I am greeted with the following output:

Background

It appears that instead of the image covering the entire web page, it's only covering whatever is defined within it's HTML tag (e.g. the Angular logo image). Is there something wrong with my html or could it be something deeply rooted in my angular project elsewhere?

SOLUTION: As per codechick's response, I removed the height/width attributes from the html and main CSS tag definitions. Instead, I added:

.mainPage {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background: url(/assets/Wood.png) no-repeat center center fixed;
  background-size: cover;
  height: 100vh;
}

Solution

well first you don't need the body, html {height:100%} then remove the height for main as well. use height: 100vh for .mainPage or the image container.

check my code here: codepen