How to overlay a body image on top of a div?

Asked

Viewed 575 times

-1

I have an image that is inside the body of css

.test-page {
    display: none;
}

html, body {
    margin:0%; height: 99%;
    background-color: #041E43;
    border-style: solid;
    border-width: 10px;
    border-color: black;
    overflow-y: hidden;
    overflow-x: hidden; 
}

#img{
    background-image: url('../images/img.png');
    background-repeat: no-repeat;
}

.page {
    position: relative;
    float: left;
    background: #041E43;
    width: 100%;
    margin-left:0%;
    margin-top:0%;
    padding-bottom: 3%;
}

h1, h2 {
    text-align: center;
}

h1 {
    color: white;
    font-size: 200%;
}

h2 {
    color: yellow;
    font-size: 200%;
}

p {
    color: blanchedalmond;
    font-size: 250%;
    text-align: center;
}

.button {
    margin: 0 auto;
    margin-top: 20%;    
    margin-left: 15.5%;
}

.footer{
    position: relative;
    top: 92%;
    left: -50%;
    color: white;
    white-space:nowrap;
}

.manometer {
    background: white;
    width: 15%;
    height: 25%;
    text-align: center;
    font-weight: bold;
    font-size: 5%;
    font-size: 2rem;
    margin-left: 12.5%;
    margin-top: 7%;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.test-ok {
    background-color: yellowgreen;
}

.test-notok {
    background-color: red;    
}

But it’s hidden behind a div on the index, I just wanted to superimpose it on everything, I’ve tried position: absolute but it didn’t work, broke the code.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>TESTE DE FREIOS</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/manometer.css">
    <link rel="stylesheet" href="css/button.css">
</head>

<body>

    <button id='b1'>botao sem fio truck</button>
    <button id='b2'>botao sem fio bus</button>
    <button id='b3'>botao inicio/reiniciar</button>
    <button id='b4'>test</button> 

    <div class='container'>
        <div id='content'></div>
    </div>

        <div id='img'></div>

<div class='page' id='page-home'>
    <h1>BEM VINDO, SELECIONE UMA LINHA</h1>
    <button onclick='navigate("truck")' class="button navigation" id='button-truck' >
        TESTE CAMINHÕES
    </button>
    <button onclick='navigate("bus")' class="button navigation" id='button-bus'>
        TESTE ÔNIBUS
    </button>
</div>

    <button onclick='saveToPdf()' >SAVE</button>

    <script src='lib/jquery.min.js'></script>
    <script src='lib/jspdf.min.js'></script>
    <script src='js/saveToPdf.js'></script>
    <script src='js/plc.js'></script>
    <script src='js/pageManager.js'></script>
    <script src='js/sensors.js'></script>

    <div class="footer">&copy; 2017 | Elaborado por Poka Yoke Team | LST Team</div>

</body>

</html>
html css

  • And why not create a <div> with that image and on top of everything?

  • I may be wrong, but the way your image looks like it’s being loaded 2x, now I think it’s necessary to add html tmb

  • Isac I did this, but the image does not appear, do not know why, same way , I will post the html Magic

  • the div img is what I created to put the image, but in css when I edit and put her way, nothing appears, only appears in the body

  • Then also put the CSS that loads the image in this <div> in the question

  • position: absolute working with position requires a certain control of the page (even more so when it is Absolute), the thing has to be thought through before trying to make it happen, so your page defaults. You can try to control the position of the elements using the technique of z-index

  • https://www.w3schools.com/cssref/pr_pos_z-index.asp this link helps you work with z-index, I do not write a proper answer because the code you provided does not help anything. It is missing precisely the culprit of the problem, the image.

  • posted all the css, I’ll take a look at this link Bsalvo

  • I made an example of z-index for you can sometimes help https://jsfiddle.net/dL29174x/

  • very good, that even needed, put it here that I mark as answered , worth Bsalvo

Show 5 more comments

1 answer

-1

If one of his divs has an attribute position: absolute or position: relative among others, you need to use z-index to increase the "importance" of div. See an example of W3schools.

Browser other questions tagged html css

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