How do I place an image that will scroll over the background and under the texo?

Question

How do I place an image that will scroll over the background and under the texo?

Asked 7 years, 1 month ago

Viewed 1,587 times

0

I’m learning HTML alone (doing research and free courses on the internet), I came across the following problem:

I have a background image that was correctly applied, but I am not able to add another image correctly, it is cropped (I put a picture of how it looked), which will be below the text and will scroll along with the Scroll page, and stay on top of the background.

Obs.: My style is being edited into another file called estilo.css, and not directly on HTML.

Obs.: I’m quite a beginner in html and css.

Just follow my code 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;
}

Follow 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>

The image you want to put is that of the logo ?

– NoobSaibot

2017/10/20 at 23:37
Yes, it is. I updated the post and the codes, because I could put the image, but I could not adjust it.

– Robson Saldanha

2017/10/20 at 23:46

1 answer

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.

by Bruno Rozendo • **1,339** points · Answer 1 · 2017-10-21T00:42:55+00:00

I guess what you’re missing is knowing which property you should use.

For this I strongly recommend the following study script:

Understand the property display of css

Ex: What difference between inline and block ?
Understand the property float of css

With the knowledge of display + float you will already be able to build a layout complete to one page.
Understand the property position of css

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

I’ll try to make an analogy to try to help:

A website is like a house.

HTML is equal to a plastered wall

CSS is equal to plaster+decoration

Javascipt is equal to rightec

HTML + CSS + Javascrip complement