Boa noite pessoal, seguinte, estou aprendendo html "sozinho" (fazendo pesquisas e cursos gratuitos na internet), me declarei com o seguinte problema:

Eu tenho uma imagem de fundo que foi corretamente aplicada, porém não estou conseguindo adicionar outra imagem, que ficará em baixo do texto e irá rolar junto com o scroll da página, e que fique à cima do background.

OBS: Meu estilo está sendo editado em outro arquivo chamado estilo.css, e não diretamente no html.
OBS2: Sou bem iniciante no html e css.

Segue o meu código css:

    @charset "utf-8";
    
    body {
    	background-image: url("../_imagens/fundo1.jpg");
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-attachment: fixed;
    	color: rgba(250, 250, 250, 0.8);
    }
    
    h1 {
    	text-align: center;
    }
    
    div.logo {
    	background-image: url("../_imagens/logoktg.png");
    }

Segue o código do html:

    <!DOCTYPE html>
    <html lang="pt-br">
    
    <head>
    	<meta charset="UTF-8">
    	<title>Ka-Tet Gaming</title>
    	<link rel="stylesheet" href="_css/estilo.css"/>
    </head>
    <body>
    	<div id="header">
    		<div class="logo" id="logo">
    		<header id="cabecalho">
    			<hgroup id="titulo">
    				<h1>Seja Bem Vindo ao Site da KTG!</h1>
    				<h2>Time Range 1 da PlayerLink.</h2>
    			</hgroup>
    		</header>
    		</div>
    	</div>
    </body>
    </html>