Creating a Watermark as an Overlay with HTML+CSS

Issue

I want to have a text as a watermark (centered and on top of the screen) but when I use the z-index property, I lose the ability to interact with any other elements present behind it. Help, please!

Code-

.watermark-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 1;
}

 <p class="watermark-text">A Web Dev Course Project</p>

Solution

If your watermark has to appear on a text content you can use negative or z-index less than that of the element. If your watermark has to appear in top of a block content you have to use z- index higher than that of the element. In that case you can add

pointer-events: none;

to your css or the following options.

user-select: none; /* Non-prefixed version for chorme, opera and*/
-ms-user-select: none; /* Internet Explorer, Edge */
-moz-user-select: none; /* Firefox */
-khtml-user-select: none; /* Konqueror HTML */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */

and also add opacity of your choice if needed.

opacity: 0.2; /*(0-1)/*

Answered By - Mr. PHP