Watermark text repeated diagonally css/html

Asked 28/11, 2016 at 20:55 Answered 6/1, 2021 at 4:7

How can I achieve the following watermark text ("howbloggerz") with css/html?

Gyno answered 28/11, 2016 at 20:55 Comment(3)

I don't believe this can be done with HTML/CSS only as it requires modifying the actual image (otherwise viewers can save the image without the watermark). Is a server sided solution possible? – Lianna 28/11, 2016 at 20:58

It is not required to modify the actual image. Viewers are allowed to save it without watermark in this case :) – Gyno 28/11, 2016 at 21:19

This is exactly what i needed to make it obvious an editing copy is displayed instead of the official one. – Masters 19/5, 2017 at 14:56

Set the size of your container and float your text using absolute positioning while transforming your text with rotate.

#watermark {
  height: 450px;
  width: 600px;
  position: relative;
  overflow: hidden;
}
#watermark img {
  max-width: 100%;
}
#watermark p {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 18px;
  pointer-events: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}

<div id="watermark">
  <img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">
  <p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>
</div>

Note: For repeating text, I would suggest using either JavaScript or jQuery.

Bartholomew answered 28/11, 2016 at 21:11 Comment(3)

Your watermark text can be selected, you might want to fix that with pointer-events: none; – Lianna 28/11, 2016 at 22:7

You can also fix it with user-select: none; – Fatty 27/10, 2020 at 14:23

Keep in mind that user-select is still a working draft and that most browsers will require a vendor prefix or different name for use. – Bartholomew 27/10, 2020 at 15:21

This is pretty similar to Daerik's answer, but I wanted to avoid using an extra element, and automate the watermark text generation.

document.querySelectorAll('.watermarked').forEach(function(el) {
  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
});

.watermarked {
  position: relative;
  overflow: hidden;
}

.watermarked img {
  width: 100%;
}

.watermarked::before {
  position: absolute;
  top: -75%;
  left: -75%;
  
  display: block;
  width: 150%;
  height: 150%;
  
  transform: rotate(-45deg);
  content: attr(data-watermark);
  
  opacity: 0.7;
  line-height: 3em;
  letter-spacing: 2px;
  color: #fff;
}

<div class="watermarked" data-watermark="howbloggerz">
  <img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

Lianna answered 28/11, 2016 at 22:4 Comment(8)

Thanks, this might be even easier :) – Gyno 28/11, 2016 at 22:15

Array.from() and String.prototype.repeat() were introduced in the same ECMAScript 2015 standard (ES6, or ECMA-262), so I'm curious as to why hesitate to use one and not the other? Otherwise, awesome answer. – Gram 13/8, 2017 at 0:52

@PatrickRoberts, good question! This was an oversight on my part. I'd gotten so used to having Array.from polyfilled, that it completely slipped my mind that support was essentially identical. I've updated the post to use String.prototype.repeat. – Lianna 13/8, 2017 at 0:57

Works great. Though I had to avoid using any JavaScript since the OP was asking for CSS/HTML. That's why I added my suggestion to use JavaScript or jQuery. – Bartholomew 13/10, 2017 at 13:46

This did not work for me. I noticed that it also doesn't work in your example when I use "Expand snippet"... no watermark is shown. – Monachism 25/9, 2022 at 22:48

@Monachism you're probably running some ancient browser. Works on latest Firefox, Edge, Chrome – Lianna 27/9, 2022 at 0:44

Tried both Firefox and Firefox Dev. The demo worked ok, but when clicking to "Expand" it did not work. What else can I say? – Monachism 27/9, 2022 at 4:29

@Monachism sounds like a bug with SO's snippet thing to me. Possibly the expand is re-rendering the html without running the JS again? Not sure. – Lianna 27/9, 2022 at 22:50

I'm now using svg as a background image. Plain CSS:

body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'><text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20'>watermark</text></svg>");
}

<body style="width:100%;height:100%"></body>

Javascript to set the background:

function watermark(text) {
  var body = document.getElementsByTagName('body')[0];
  var bg = "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='100px'>" +
    "<text transform='translate(20, 100) rotate(-45)' fill='rgb(245,45,45)' font-size='20' >" + text + "</text></svg>\")";
  body.style.backgroundImage = bg
}

//for this test
var input = document.getElementById('a');
watermark(input.value);
input.addEventListener('input', function(evt) {
  watermark(this.value);
});

<body style="width:100%;height:100%">
  <input id="a" value="change me" />
</body>

Campobello answered 19/7, 2019 at 13:38 Comment(3)

this does not print on pdfs – Photoelasticity 19/9, 2022 at 18:51

@Extrangeplanet this is CSS/HTML and has nothing to do with PDF, you are probably using a library to convert it, check your library support. – Campobello 22/9, 2022 at 20:6

This is by far the most elegant solution. Well done. – Zacek 17/2, 2023 at 10:21

Set the size of your container and float your text using absolute positioning while transforming your text with rotate.

#watermark {
  height: 450px;
  width: 600px;
  position: relative;
  overflow: hidden;
}
#watermark img {
  max-width: 100%;
}
#watermark p {
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  font-size: 18px;
  pointer-events: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
}

<div id="watermark">
  <img src="http://www.topchinatravel.com/pic/city/dalian/attraction/people-square-1.jpg">
  <p>This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark. This is a watermark.</p>
</div>

Note: For repeating text, I would suggest using either JavaScript or jQuery.

Bartholomew answered 28/11, 2016 at 21:11 Comment(3)

Your watermark text can be selected, you might want to fix that with pointer-events: none; – Lianna 28/11, 2016 at 22:7

You can also fix it with user-select: none; – Fatty 27/10, 2020 at 14:23

Keep in mind that user-select is still a working draft and that most browsers will require a vendor prefix or different name for use. – Bartholomew 27/10, 2020 at 15:21

If it is only to lay a text over the image, here is another possible css option with drop-shadow and a pseudo (text-shadow works too)

.watermarked:after {/* draw the watermark at screen*/
  color: rgba(0, 0, 0, 0.4);
  content: 'watermarked watermarked watermarked';
  word-spacing: 3em;
  transform: rotate(-60deg);
  filter: 
  drop-shadow(2em 3em  #000) 
  drop-shadow(4em 6em  #000) 
  drop-shadow(8em 12em #000) 
  drop-shadow(-15em -24em #000)
  ;
}

/* makeup */
.watermarked {
  width: max-content;
  border: solid;
  display: grid;
  overflow: hidden;
}

img,
.watermarked:after {
  grid-row: 1;
  grid-column: 1;
  margin: auto;
}

<div class="watermarked" data-watermark="howbloggerz">
  <img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>

Licentiate answered 25/10, 2020 at 13:39 Comment(0)

     Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
        el.dataset.watermark = (el.dataset.watermark + ' ').repeat(300);
    });

.watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.75;
    line-height: 4em;
    letter-spacing: 2px;
    color: #cccccc;
}

<html>
<head>
<title>
Form and Watermarks
</title>
</head>
<body>

<h1>Form Demo</h1>
<form method="post">
    First Name: <input name="first" type="text" /><br>
    Last name: <input name="last" type="text" />
    <br />
    <input name="Submit" type="submit" value="submit" />
</form>

<div class='watermarked' data-watermark='watermark..' ></div>

</body>
</html>

It works great but not with html form. The form elements become disabled. Check this out.

Mcclenaghan answered 6/1, 2021 at 4:7 Comment(1)

This issue is also happening with hyperlinks etc... I got the problem fixed by adding pointer-events: none; – Mcclenaghan 8/1, 2021 at 2:25

CSS:-
.watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;

    display: block;
    width: 300%;
    height: 300%;

    transform: rotate(-45deg);
    content: attr(data-watermark);

    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:-1;
}

HTML:-
<div class="watermarked" data-watermark="Watermark.."></div>

SCRIPT:-

<script>        
Array.from(document.querySelectorAll('.watermarked')).forEach(function(el) {
        el.dataset.watermark = (el.dataset.watermark + ' ').repeat(10000);
    });
</script>

watermark position should be as fixed and display with & height should be your screen size. Then watermark will be printed in your whole report or something.

Sporades answered 17/1, 2018 at 6:21 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags