0

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;    
}
3
  • Seria legal um exemplo visual pra poder te ajudar melhor!
    – wDrik
    Commented 27/06/2019 às 17:36
  • Qual versão do bootstrap?
    – hugocsl
    Commented 27/06/2019 às 17:44
  • Versão atual 4.1.3
    – Maria
    Commented 27/06/2019 às 17:45

1 Resposta 1

0

Consegui resolver colocando o z-index: 1;

.cab {
  background: url('../../../assets/img/background_mod_bdh.png') no-repeat center;
  background-size: cover;
  // fixar no top
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  max-height: 10px !important;
  height: 50px !important;
  margin: 0 auto; //centraliza um elem
  z-index: 1;

}

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 .