How to add watermark image to your website? It’s pretty simple!

First, you should make a image as your watermark image apparently.

Then, add this code to your css file.

body::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('./watermark.png');
  opacity: 0.3;
  pointer-events: none;
}

The point is the pointer-events property.

As MDN saying:

It sets under what circumstances (if any) a particular graphic element can become the target of pointer events.

The value none instructs the pointer event to go “through” the element and target whatever is “underneath” that element instead.

Result:

Live demo:

πŸ‘‡ Please leave your comment if you like this.πŸ‘‡