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:
- Add
<div id="watermark">MESSAGE</div>at the bottom of the page. - Position it accordingly –
#watermark { position: fixed; bottom: 0; right: 0; z-index:999; }
- Add
- 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
[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-add-watermark-in-html-css/” title=”How To Add Watermark In HTML CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]
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.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short 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.
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.
PAGE WATERMARK
All right, let us now start with creating a watermark for a webpage.
THE CODE
<style>
/* (A) PAGE WATERMARK */
#watermark {
/* STICK AT BOTTOM RIGHT */
position: fixed;
bottom: 10px;
right: 10px;
z-index: 999;
/* TRANSPARENCY */
opacity: 0.5;
/* COSMETICS */
text-align: right;
color: red;
}
</style>
<!-- (B) THE PAGE -->
<header>MY SITE</header>
<main>
<h1>HELLO WORLD!</h1>
<img src="dog.jpg"/>
<p>Some random contents</p>
</main>
<footer>Copyright My Site</footer>
<!-- (C) 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
#watermarktoposition: fixed; bottom: 10px; right: 10px; z-index: 999;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
/* (X) 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
<style>
/* (A) IMAGE WATERMARK */
.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;
color: red;
}
</style>
<!-- (B) WATERMARKED IMG -->
<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
.watermarkcontainer toposition: 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 ::afteris – 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: 0to place the watermark at the bottom right corner of the image. - Finally,
content: "WHATEVER";andopacity: 0.5will turn it into a watermark.
EXTRA – WATERMARK TO IMAGE CAPTION
/* (X) 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
- Creating watermark using HTML and CSS – Stack Overflow
- Embedding Watermark Using CSS – Permadi.com
- ::after / ::before – CSS-Tricks
- How to Disable Copy Text in Javascript & CSS – Code Boxx
- PHP Watermark – Code Boxx
TUTORIAL VIDEO
INFOGRAPHIC CHEAT SHEET
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!
