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

Question

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

Navigation

#1 by (-1 votes)

-1

I have an image that is inside the css body

.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 is hidden behind a div in the index, I just wanted to override it on top of everything, I already tried position: absolute but it did not work, it 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

asked by anonymous 24.10.2017 / 12:20

1 answer

Error performing actual time request with XMLHttpRequest How to insert data from a textarea into the database?

score -1 · Answer 1

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