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>
        <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;


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

                <h1>Some text</h1>


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?