Trying to build out a hero style masthead with a transparent cover image, and a color tint overlay; then display some text on top of this. I am using bootstrap 3 as underlying framework.

I have my hero wrapped in a div, I then have two child div. One contains the background tint layer, the other contains the text/title.

The background div layer is breaking out of the parent wrapper div and covering the entire viewport below it. I'm not sure where i went wrong.

Fiddle of my broken attempt: Fiddle

#page-title {
  font-size: 2.2em;
  padding: 20px 40px;
  margin-bottom: 40px;
}

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.bg-wrapper {
  background-image: url(/whatever.png);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
<div class="bg-wrapper">
  <div class="bg-layer"></div>
  <header id="page-title">
    <div class="container">
      About Us </div>
  </header>
</div>

2 Answers

0
Lalji Tadhani On

Add high z-index on .bg-layer, beacuse bootstrap CSS navbar Class default z-index is 1000

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index:1001;;
}

https://jsfiddle.net/lalji1051/9b46x5yo/3/

0
Mobarak Ali On

All your code is absolutely fine, Just add this line position: relative;to the .bg-wraper class and you will get the desired result!

#page-title {
  font-size: 2.2em;
  padding: 20px 40px;
  margin-bottom: 40px;
}

.bg-layer {
  opacity: 0.75;
  background-color: #f7f8fa;
  background-color: #f005; /* just adding this for visibility*/
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.bg-wrapper {
  background-image: url(/whatever.png);
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  /*Just this additionale property*/
  position: relative;
}
<div class="bg-wrapper">
  <div class="bg-layer"></div>
  <header id="page-title">
    <div class="container">
      About Us </div>
  </header>
</div>