Nao consigo colocar a imagem de fundo bg.jpg | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

segue o html:

<body>
    <header>

        <div class="caixa">
            <h1><img src="C:\Users\gabri\Downloads\imagens\logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
        </div>

    </header>

    <main>

        <ul class="produtos">
            <li>
                <h2>Cabelo</h2>
                <img src="C:\Users\gabri\Downloads\imagens\cabelo.jpg">
                <p class="produto-descricao">Na tesousa ou máquina, como o cliente preferir</p>
                <p class="produto-preco">R$ 25,00</p>
            </li>

            <li>
                <h2>Barba</h2>
                <img src="C:\Users\gabri\Downloads\imagens\barba.jpg">
                <p class="produto-descricao">Corte e desenho profissional de barba</p>
                <p class="produto-preco">R$ 18,00</p>
            </li>

            <li>
                <h2>Cabelo + Barba</h2>
                <img src="C:\Users\gabri\Downloads\imagens\cabelo+barba.jpg">
                <p class="produto-descricao">Pacote completo de cabelo e barba</p>
                <p class="produto-preco">R$ 35,00</p>
            </li>

        </ul>
    </main>

    <footer>
        <img src="C:\Users\gabri\Downloads\imagens\logo-branco.png"
        <p>Copyright Barbearia Alura - 2019</p>
    </footer>
</body>

e o css:

header{ background: #BBBBBB; padding: 20px 0; }

.caixa{ position: relative; width: 940px; margin: 0 auto; }

nav{ position: absolute; top: 110px; right: 0;

}

nav li{ display: inline; margin: 0 0 0 15px; /* topo, direita, baixo, esquerda */ }

nav a{ text-transform: uppercase; /* deixando a letra maiuscula / color: #000000; / deixando a letra em preto / font-weight: bold; / deixando em peso negrito / font-size: 22px; / aumentado a fonte / text-decoration: none; /tirando o sublinhado */ }

nav a:hover{ /HOVER -> quando o mouse esta por cima apenas dos links dentro do menu de navegacao a */ color: #C78C19; text-decoration: underline; /Deixando sublinhado quando se passa o mouse por cima */ }

.produtos{ width: 940px; margin: 0 auto; padding: 50px 0; }

.produtos li{ display: inline-block; text-align: center; width: 30%; vertical-align: top; margin: 0 1.5%; /ESPAÇAMENTO EXTERNO -> margem de 0 pra cima e pra baixo e 1.5% para os lados */ padding: 30px 20px; /ESPACAMENTO INTERNO -> 2px pra cima e pra baixo e 20px para os lados / box-sizing: border-box; /Coloca o espacamento dos pixels dentro dos 30% da largura / /Sem o box-sizing, ele acrescentaria os pixels na largura, alem dos 30% ja feitos no wight / border: 2px solid #000000; /Declarando a borda no formato: tamanho / tipo / cor / border-radius: 10px; /Arredondando as bordas dos quadrados */ }

.produtos li:hover{ border-color: #C79C19; }

.produtos li:active{ /*Deixando a borda verde enquanto o mouse clicar no item */ border-color: #088C19; }

.produtos li:hover h2{ /*Quando o mouse é passado por cima do elemento, esse aumenta de tamanho */ font-size: 34px; }

.produtos h2{ font-size: 30px; font-weight: bold; }

.produto-descricao{ font-size: 22px; }

.produto-preco{ font-size: 22px; font-weight: bold; margin-top: 10px; /*Coloca uma margem de 10px para cima. outra opcao -> margin: 10px 0 0; */ }

footer{ text-align: center; background: url("C:\Users\gabri\Downloads\imagens\bg.jpg"); }