How do i watermark an image in html?

Another way is to create a relative div and put it in the flow of the page, placing the main image first and then place the watermark on top.

Or you could overlay your image with watermark text. This can easily be done with HTML or CSS.

HTML:

The CSS code is longer, as you need to define the class, etc and use the :after element as Brett described above.

.watermark {
position: relative;
padding: 0;
margin: 0;
}
.watermark img {
display: block;
max-width: 100%;
height: auto;
}
.watermark:after {
content: "";
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0.6) 70%) repeat 0 0;
z-index: 1;
}
.watermark-text {
display: block;
position: absolute;
width: 100%;
color: #fff;
left: 0;
bottom: 0;
padding: 1em;
font-weight: 700;
z-index: 2;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

In this simple tutorial, we are going to learn how to add watermarks in different ways through HTML and CSS. Suppose you want to show your logo as a watermark in the background of your website or you want to display a specific text watermark in the header or footer of your website. You can easily do this with the following methods below. You can also add text watermark using PHP. But in this tutorial, we are going to use HTML and CSS.

Before going too deep let’s see how it can be done very easily. We will then cover the other methods step by step.

CONTENTS

• The basic method to show a text watermark to an HTML page:
  • How to disable the selection of watermark text by CSS?
• 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:

1. In order to add a text watermark top right of a page, we need to add a div element with the class name watermark. So add
   Watermark text
   anywhere into your .
2. 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 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 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 . Here we also add background-attachment: fixed; to keep our background image fixed.

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.

How do I make an image transparent in HTML?