How To Add Watermark in HTML CSS – Simple Examples

Welcome to a quick tutorial on how to add a watermark in HTML and CSS. Want to place a subtle message on your website? Maybe to remind users that their membership has expired? Or maybe you want to automatically add a watermark to images?

  • To add a watermark to an HTML page:
    • Place a <div id="watermark">MESSAGE</div> at the bottom of the page.
    • Position it accordingly – #watermark { position: fixed; bottom: 0; right: 0; }
  • To add a watermark to an image, we can use the after pseudo-class:
    • <img class="watermark" src="IMAGE.JPG"/>
    • .watermark { position: relative; }
    • .watermark::after { position: absolute; bottom: 0; right: 0; content: "COPYRIGHT"; }

That covers the basics, but let us walk through a few more examples – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Page Watermark Image Watermark
Useful Bits & Links Tutorial Video The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

PAGE WATERMARK

All right, let us now start with creating a watermark for a webpage.

 

THE CODE

1-page-watermark.html
<style>
#watermark {
  position: fixed;
  bottom: 5px;
  right: 5px;
  opacity: 0.5;
  text-align: right;
  color: red;
}
 
/* DOES NOT MATTER */
html, body { padding: 0; margin: 0; font-family: arial; }
header, main, footer { padding: 10px; }
header { background: #ffbdbd; }
main { background: #e0ffbd; }
footer { background: #bde8ff; }
</style>
 
<!-- THE PAGE -->
<header>MY SITE</header>
<main>
  <h1>HELLO WORLD!</h1>
  <img src="dog.jpg"/>
  <p>This are some random contents</p>
</main>
<footer>Copyright My Site</footer>
 
<!-- WATERMARK -->
<div id="watermark">
  <h1>Reminder</h1>
  <p>Your trial membership will expire in 3 days!</p>
</div>

 

THE EXPLANATION

This shouldn’t be too much of a mystery. On the HTML part, we only need to create a <div id="watermark"> and sandwich whatever message inside. As for the CSS:

  • We set #watermark to position: fixed; bottom: 5px; right: 5px; so that it will sit at the bottom right of the page no matter how the user scrolls past the page.
  •  The transparent effect is set with opacity: 0.5, this can be any number from 0 (invisible) to 1 (opaque).
  • Finally, the rest of the  text-align:right; color: red; are just cosmetics.

 

 

EXTRA – PREVENT TEXT HIGHLIGHT

1-page-watermark
/* PREVENT HIGHLIGHTING IF YOU WANT */
main {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

If you are adding a “warning” watermark to stop people from copying your webpage, here is a small additional step to take – Simply disable text highlighting with user-select: none. There are more ways to discourage copying, and I will leave a link in the extras section below.

 

IMAGE WATERMARK

So far so good? Let us now apply the same opacity trick, but on an image now to create an image watermark.

 

THE CODE

2-img-watermark.html
<style>
.watermark img {
  width: 100%;
}
.watermark {
  position: relative;
}
.watermark::after {
  content: 'COPYRIGHT, YOU SHALL NOT STEAL!';
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.5;
  font-size: 1.5em;
}
</style>
 
<h1>Hello World!</h1>
<div class="watermark">
  <img src="dog.jpg"/>
</div>

 

 

THE EXPLANATION

This should be pretty straightforward as well. On the HTML part, we only need to wrap the <img> in a <div class="watermark">. As for the CSS:

  • We have to first set the .watermark container to position: relative – This is necessary to position the watermark properly.
  • The watermark is placed in .watermark::after… For you guys who do not know what ::before ::after is – I shall leave a link in the extras section below.
  • What happens is somewhat the same as the full page watermark. We use position: absolute; bottom: 0; right: 0 to place the watermark at the bottom right corner of the image.
  • Finally, content: 'WHATEVER'; and opacity: 0.5 will turn it into a watermark.

 

SMALL MODIFICATION – USE AS IMAGE CAPTION

2-img-watermark.html
/* USE THIS IF YOU WANT AN IMAGE CAPTION */
.watermark::after {
  content: 'IMAGE CAPTION';
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  color: white;
  font-size: 1.5em;
  background: rgba(0, 0, 0, 0.5);
}

Yep. With just a few changes, we can turn that watermark into an image caption.

 

NOT REALLY USEFUL…

Please take note that this HTML method will not alter the original image. When people do a right-click > save image, the image will still be without a watermark. If you are really into copyright protection, then use an image editing app and embed that watermark permanently.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

TUTORIAL VIDEO

 

INFOGRAPHIC CHEAT SHEET

How To Add Watermark In HTML (Click To Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *