How do I put an image that will scroll over the background and under the text?

0

I am learning HTML by myself (doing free searches and courses on the internet), I came across the following problem:

I have a background image that has been correctly applied, but I can not add another image correctly, it is cropped (I put a picture of how it was), which will be under the text and will scroll along with Scroll from the page, and stay on top of the background.

Mystyleisbeingeditedinanotherfilenamedestilo.css,notdirectlyinHTML.

Obs.:I'mabeginnerinhtmlandcss.

FollowmyCSSCSScode:

@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");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
}

The following is the html code:

<!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>
    
asked by anonymous 21.10.2017 / 01:22

1 answer

0

By the way, what you lack is what properties you should use.

For this I strongly recommend the following study roadmap:

  • Understand the% css property of%

    Ex: What is the difference between display and inline ?

  • Understand the% css property of%

    With the knowledge of about block + float you will already be able to build a display complete for a page.

  • Understand the% css property of%

    With the knowledge of about float + layout + position you will already be able to build a display complete if it is for web, mobile, tv ...

  • I'll try to make an analogy to try for help:

    A website is the same as a house.

    float equals a wall without plaster

    position is equal to plaster + decoration

    layout is equal to rightec

    HTML + CSS + Javascipt     

    21.10.2017 / 02:42