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,393
  • 1
  • 19
  • 34
patelarpan
  • 7,188
  • 2
  • 20
  • 25
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>
  • where is the overlay? – patelarpan May 16 '18 at 12:33
  • Where is the overlay? – Zuber May 16 '18 at 12:34
  • @Zuber now is it –  May 16 '18 at 12:38
  • the important isn't going to help here - you can only move the child 'forward' in the context of the parent...it will still be behind the overlay because it's parent is behind the overlay. In this case you've moved the overlay backwards, but when other elements are added into the mix, it will also be behind those. Better would be to have the background get no z-index at all and give `.content` a z-index of 1 to keep it in front. – ryantdecker May 16 '18 at 12:39
  • @Cristian yes its working now – Zuber May 16 '18 at 12:41
  • @ryantdecker ok edited. –  May 16 '18 at 12:45