Skip to main content
1 de 4

Como faço para colocar uma imagem que vai rolar por cima do background e em baixo do texo?

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>