Creating a Watermark as an Overlay with HTML+CSS

Question

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>

Do you want watermark behind all the elements? – Extraterrestrial Jul 19 '22 at 06:03 — Extraterrestrial, Jul 19 '22 at 06:03
related: https://stackoverflow.com/a/50330520/8620333 – Temani Afif Jul 19 '22 at 09:06 — Temani Afif, Jul 19 '22 at 09:06

score 1 · Accepted Answer · answered Jul 19 '22 at 06:32

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)/*

score 0 · Answer 2 · answered Jul 19 '22 at 06:26

You can stop the watermark picking up clicks etc by setting pointer-events on it to none.

Here's an example (the watermark element has a slight background to prove it is covering the button):

* {
  margin: 0;
}

.watermark-text {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
}

<p class="watermark-text">A Web Dev Course Project</p>
<button onclick="alert('I saw your click');">Click me</button>

score 0 · Answer 3 · answered Jul 19 '22 at 06:29

A way of doing this is by not letting this watermark occupy the entire width and height of the screen. To do this, remove the height and width properties and add the following code to it which doesn't occupy the entire screen. I set the background property so that it can be seen that the element only occupies just the text part of it.

.watermark-text {
  position: fixed;
  z-index: 1;
  background: pink;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

Creating a Watermark as an Overlay with HTML+CSS

3 Answers3