Background Mask Help

HTML & CSS
1

I’m using this code to create a mask that I can use to darken background photos:

.lw-darken-bg *, .lw-darken-bg-50 *, .lw-lighten-bg *, .lw-lighten-bg-50 * {
	z-index: 1;
}

.lw-darken-bg::before, .lw-darken-bg-50::before, .lw-lighten-bg::before, .lw-lighten-bg-50::before {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity : 0.25;
}

.lw-darken-bg::before, .lw-darken-bg-50::before {
	background-color:#000; 
}

.lw-lighten-bg::before, .lw-lighten-bg-50::before {
	background-color:#fff; 
}

.lw-darken-bg-50::before, .lw-lighten-bg-50::before {
    opacity : 0.5;
}

Then I’m applying it to a section like so:

<section id="Printing" class="lw-fixed-cover lw-darken-bg lw-loose" style="background-image: url('images/Press.jpg');">
  <div class="text-center lw-dont-go-crazy">
    <h2 class="lw-photo-text">Commercial Printing</h2>
    <div class="lw-row-tablet">
      <div class="card hoverable wow fadeInUp">
        ...
      </div>
      <div class="card card-block hoverable wow fadeInUp">
        ...
      </div>
    </div>
  </div>
</section>

My issue is that the mask is placed on top of the section heading, but correctly placed underneath the cards. I can’t for the life of me figure out why. It does not seem to be a z-index issue. You can see it live here:

Any help would be appreciated.

2

Try this:

h2.lw-photo-text{position:relative;}

z-index only applies to positioned elements (and a few special cases).

2 Likes
3

You’re the man, Paul. Thanks!

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.