0

Estou aprendendo HTML sozinho (fazendo pesquisas e cursos gratuitos na internet), me deparei com o seguinte problema:

Eu tenho uma imagem de fundo que foi corretamente aplicada, porém não estou conseguindo adicionar outra imagem corretamente, ela está cortada (coloquei uma foto de como ficou), que ficará em baixo do texto e irá rolar junto com o Scroll da página, e que fique à cima do background.

Foto mostrando como ficou visualmente.

Obs.: Meu estilo está sendo editado em outro arquivo chamado estilo.css, e não diretamente no HTML.

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

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>
2
  • A imagem que você quer colocar é esse do logo ?
    – NoobSaibot
    Commented 20/10/2017 às 23:37
  • Sim, é ela sim. Eu atualizei o post e os códigos, pois consegui colocar a imagem, mas não consegui ajustar ela. Commented 20/10/2017 às 23:46

1 Resposta 1

0

Pelo jeito o que lhe falta é saber quais propriedade deveria usar.

Para isso recomendo fortemente o seguinte roteiro de estudo:

  1. Entenda a propriedade display do css

    Ex: Qual diferença entre inline e block ?

  2. Entenda a propriedade float do css

    Com o conhecimento de sobre display + float vc já será capaz de construir um layout completo para um página.

  3. Entenda a propriedade position do css

    Com o conhecimento de sobre display + float+ position vc já será capaz de construir um layout completo idenpendente se for para web, celular, tv...


Vou tentar fazer uma analogia para tentar ajuda:

Um site é igual a uma casa.

HTML é igual a um parede sem reboco

CSS é igual a reboco+decoração

Javascipt é igual a rightec

HTML + CSS + Javascrip se complementão

3
  • Mas estudar CSS não iria atrapalhar o meu conhecimento em HTML? Pergunto isso por que a maioria das pessoas que são programadores, dizem que se eu quero estudar programação, devo começar por HTML, como falei, sou bem iniciante em programação, por isso estou cometendo bastante erros kkk Mas obrigado por já ter me falado que se eu aprender o que passou, vou saber consertar esse erro que estou tendo. Agradeço de verdade !! Commented 21/10/2017 às 0:47
  • fiz um update na resposta Commented 21/10/2017 às 0:59
  • Entendi, muito obrigado pela ajuda!! Commented 21/10/2017 às 1:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .