CSS: Remove opacity inheritance from parent to children

Photo by Steven Van Loy on Unsplash

This morning I had to put an image on my Calendar background Page, and was a bit confused about how to stop opacity inheritance from parent to children, here is how you can fix it !

Html Layout:

<div className="main-container">
   <div className="my-calendar">
   </div>
</div>

(S)CSS Tricks :

.main-container {
   position: relative;
   height: 100%;
   &::before {
      content: '';
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      background: url('../../images/myBackgroundPics.jpg');
      background-size: contain;
      opacity: 0.15;
    }
  .my-calendar {
      position: relative*
    }
}

First we need to make the position of the container relative.

And add à ::before to create a pseudo-element with an empty content where we apply a position absolute, and the top/right/bottom/left value to 0px to make it fullscreen.

You can play around with different background property to adjust your image.

Then we apply the correct opacity value ont it.

Finally we apply a relative position to the children to stop opacity inheritance…

That’s all, Hope it helps !!