Background Mask Help

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 {

.lw-lighten-bg::before, .lw-lighten-bg-50::before {

.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 class="card card-block hoverable wow fadeInUp">

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.

Try this:


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


You’re the man, Paul. Thanks!

1 Like

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