Mobile Website Background Image not resizing

Very new here and have never asked on this form before so forgive me for any confusion. I'm having an issue with a background image. It looks fine on my PC or when I turn my phone on it's side and view it in landscape; however, it's getting cut off and flat out not sizing right in portrait view. I can only get it to display the full image at the cost of white space at the bottom or the image being cut off. I've tried many of the solutions already posted on here to no avail. The three I posted here came the closest.

These cut off half the image but fill the screen in portrait view. However, they look good in landscape view.

body {
          width: 100%;
          height: 100%;
          background: url("HOME.png");
          background-position: center center;
          background-repeat: no-repeat;
          position: fixed;
          background-size: cover;
    }

and

body {
    background: url("HOME.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

this shows the full image but leaves the half the screen blank and explodes in landscape

body{
    background: url("HOME.png") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100vw;   
        overflow: hidden;
}

The image is 1920x1080. I've also resized the picture to 321x174 with the exact same results. Is this an image size issue? Is there a way I can get the image to display in the screen with no white space and without it being cut off? Please help I'm bashing my brains in with this.