Tenho um header
fixo na minha página com uma imagem de fundo, quando a rolagem acontece o header
vai junto e tem que sobrepor o html
que está por baixo, e não ficar transparente, mas ele está transparente.
HTML:
<div class="background-banco-horas">
<!-- ! -->
<div class="container cab ">
<app-header></app-header> <!-- do banco_de_hora -->
<div class="row font-text text-light mat-name ">
<div class="col">
<p>Matrícula: 000495</p>
</div>
<!-- ! -->
<div class="col">
<p class="name text-upp">Nome: ELIANA MARCOLINO MACEDO</p>
</div>
</div>
<!-- ! -->
<div class="row font-text text-light mat-name ">
<div class="col">
<p>Matrícula: {{respMat}}</p>
</div>
<!-- ! -->
<div class="col">
<p class="name">Gerente: {{respNome}}</p>
</div>
</div>
<!-- ! -->
<div class="row font-text text-light mat-name ">
<div class="col">
<p>Matrícula: {{matriculaColab}}</p>
</div>
<!-- ! -->
<div class="col">
<p class="name">Colaborador(a): {{nomeColab}}</p>
</div>
</div>
<!-- ! -->
<div class="row hour_default border-bottom">
<div class="col-sm-lg">
<p class="text-light">HORÁRIO PADRÃO:</p>
</div>
<!-- ! -->
<div class="col-sm">
<p class="text-light">8:00 - 12:00 - 13:00 - 18:00</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.cab {
background: url('../../../assets/img/background_mod_bdh.png') no-repeat center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
right: 0;
max-height: 10px !important;
height: 50px !important;
margin: 0 auto;
}