How to add watermark various way in HTML and CSS
CONTENTS [hide]
- The basic method to show a text watermark to an HTML page:
- How to add a background watermark image to an HTML page?
- How to add watermark text in CSS?
- How to add text watermark diagonally?
- How to add text watermark repeated diagonally in CSS HTML?
- How to show a watermark only when the user print a webpage?
The basic method to show a text watermark to an HTML page:
- In order to add a text watermark top right of a page, we need to add a
divelement with the class namewatermark. So add<div class="watermark">Watermark text</div>anywhere into your<body>. - Then add the CSS
.watermark{position: fixed; top: 0; right: 0;}. We can also change the position and style according to our need.
In the above example, we can see a small piece of text i.e. “Watermark text” is displaying at the top right corner of our web page. But the problem is, user can select the text. So we need to disable users selection by using CSS. You can also learn from this tutorial How to make certain text unselectable with CSS?
How to disable the selection of watermark text by CSS?
To disable the selection of watermark text, we need to add this CSS.
.watermark{
position: fixed;
bottom: 0;
right: 0;
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 */
}The above example is basic. So let’s take a bit of a deeper dive into the subject.
How to add a background watermark image to an HTML page?
In order to add a background watermark image follow the steps below.
- First set a background image to
<body>element i.e.background-image: url(watermark.png); - Then change the background image position to center to center the watermark and set no-repeat
background-position: center; background-repeat: no-repeat; - Check the image below
But the main problem is the background watermark is mixed with the text color. You might think, we should lower the opacity to overcome this. But wait, according to w3schools , if we set parent opacity, all child elements inherit the same transparency. By the way, if you are interested to know what is inherit or initial, you may find this tutorial helpful Difference between CSS initial and inherit.
Ok so let’s back into this tutorial. To overcome this, we have to use Pseudo-elements. Instead of setting the background image of <body> element, we are going to set it’s ::before pseudo-element. Let’s check the code.
html{
height: 100%;
}
body{
position: relative;
height: 100%;
}
body:before{
content: ' ';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(watermark.png);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
opacity: 0.2;
}
In body:before we have set the opacity: 0.2;. So it will the opacity only the body:before element without decreasing other child elements of <body>. Here we also add background-attachment: fixed; to keep our background image fixed.
How to add watermark text in CSS?
We can use text instead of a background watermark. It will help to reduce server load time also. So let’s check how to do it.
body:before{
content: 'CodeHasBug';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
color: #0d745e;
font-size: 100px;
font-weight: 500px;
display: grid;
justify-content: center;
align-content: center;
opacity: 0.2;
}
Here we have changed the position to fixed. Otherwise, when a user scrolls, it will also scroll. Also, set the display: grid; In the content property, we can use any text that we want to display as a watermark. Also, we can change the watermark color by using color: #0d745e;
How to add text watermark diagonally?
If you understand the above example, you can easily set the text watermark diagonally. We just need to rotate the pseudo-element by using CSS transform property. So lets check the example.
body:before{
content: 'CodeHasBug';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
color: #0d745e;
font-size: 100px;
font-weight: 500px;
display: grid;
justify-content: center;
align-content: center;
opacity: 0.2;
transform: rotate(-45deg);
}
Here we have set transform: rotate(-45deg); You can set as per your need.
How to add text watermark repeated diagonally in CSS HTML?
This can’t be done only using CSS & HTML. We need to add jQuery or JavaScript to get the desired result. But we are going to learn pure CSS watermark. If we want to do by using image then it can be possible. Otherwise, we have to use the script for that. So we need rotated image for that. Check the picture below.
html{
height: 100%;
}
body{
position: relative;
height: 100%;
}
body:before{
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
background: url(watermark.png) 0 0 repeat;
background-position: center;
opacity: 0.1;
}
Here we have used repeat. So it will repeat the same image.
How to show a watermark only when the user print a webpage?
In the above picture, we can see the text watermark is showing only when a user wants to print a webpage as PDF or directly from the printer. This is very useful whenever someone wants to print data from your website, the watermark will also be printed on that page. So let’s check how to do this.
html{
height: 100%;
}
body{
position: relative;
height: 100%;
}
@media print {
body:before{
content: 'CodeHasBug';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
color: #0d745e;
font-size: 100px;
font-weight: 500px;
display: grid;
justify-content: center;
align-content: center;
opacity: 0.2;
transform: rotate(-45deg);
}
}In the above example we are using print media-query. So the above CSS style only works when we print something.
..
Comments
Post a Comment