Chrome doesn't recognize CSS background-image

I’ve been attempting to use CSS-embedded HTML and Chrome 58 to create a hero image from local elements, but I can’t seem to persuade the CSS to recognize the file path of my chosen background image (located directly in my Windows desktop, as is my HTML file). If I use to reference the same image with the same filepath, it works just fine. My code:

<!DOCTYPE html>
<html>
    <head>
        <style media="screen" type="text/css">
            html, body {
            height: 100%;
        }

        .hero-image {
            background-images: url(images/newbanner.jpg);
            Width: 50%;
            height: 50%;

            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }

        .hero-text {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: black;
        }

        h1 {  
            font-size: 50px;
            color: black;
        }

        </style>
    </head>

    <body>
        <!--<img src="azzdbannerNEW.jpg">-->
        <div class="hero-image">
            <div class="hero-text">

                <h1>Some text</h1>

            </div>
        </div>
    </body>
</html>

I have read the several other answered questions on this topic. Some recommend adding single or double quotes, some recommend removing them. Some have also recommended changing background-image to background. Others said to try the file with file:// or file:///.

I have tried every combination of these to no avail.

What am I doing wrong/ how can I fix this?