0

I'm using z-index but my text still isn't coming above my tint in the bg. I'm new to coding so I'm sorry if I've done something wrong. Any help would be appreciated.

.parallax { 
    /* The image used */
    background-image: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg");
    /* Set a specific height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-tint {
position: relative;
  }
 .bg-tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(56,56,56, 0.9);
  transition: all .3s linear;
  z-index: 2;
}
.bg-tint .content h3 {
 z-index: 6;
}
<div class="parallax bg-tint">

<div class="content">
 <h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>
 <p>We cover most English speaking countries, including yours!</p>
</div>

</div>
Matt H
  • 91
  • 6
  • 1
    z-index only works on elements that are not positioned statically (ie not the default position) so the h3 z-index will not work – Pete May 16 '18 at 12:32
  • if you move the z-index to the 'content' div instead of the h3, it should work - you might need to add position:relative there as well. This is an issue with stacking contexts - you are moving the h3 forward within the context of it's parent, but the parent is still behind the overlay. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context – ryantdecker May 16 '18 at 12:36

2 Answers2

1

Add z-index:3 and position:relative to .content.

.parallax { 
    background: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg") center center no-repeat; 
    background-attachment: fixed;
    background-size: cover;
    height: 100%;
}
.bg-tint {
position: relative;
  }
 .bg-tint:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(56,56,56, 0.9);
  transition: all .3s linear;
  z-index: 2;
}
.bg-tint .content  {
position:relative;
 z-index: 3;
}
.bg-tint .content h2 {

}
<div class="parallax bg-tint">

<div class="content">
 <h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>
 <p>We cover most English speaking countries, including yours!</p>
</div>

</div>
Zuber
  • 3,263
  • 1
  • 16
  • 30
patelarpan
  • 5,988
  • 2
  • 18
  • 23
0

Just put your container :before on z-index: -1 

.parallax { 
        /* The image used */
        background-image: url("https://www.lincoln.ac.uk/home/media/responsive2017/studywithus/internationalstudents/gatewayToEurope_1500x996px-min.jpg");
        /* Set a specific height */
        height: 100%; 

        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index:-1;
    }
    .bg-tint {
    position: relative;
z-index:1;
      }
     .bg-tint:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(56,56,56, 0.9);
      transition: all .3s linear;
      z-index:-1;
    }
    .bg-tint .content h3 {
    }
<div class="parallax bg-tint">

    <div class="content">
     <h3 style="padding-top:200px; padding-bottom: 200px;font-weight: 400; font-size: 64px; color:white;">Covering your location!</h3>
     <p>We cover most English speaking countries, including yours!</p>
    </div>

    </div>
Cristian
  • 424
  • 3
  • 14