0

I took the following code from another question however it is not working for me....can anyone say why? how to get this part working? 

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

I placed it in script tags

Array.from(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>
Willy
  • 1
  • 1
  • Would be helpful if you showed the question where you took the code from. – Pete Jan 02 '18 at 14:53
  • Also what exactly about the above code does not work as it works fine for me: https://jsfiddle.net/oo7jj8jw/1/ (I just upped the number of repeats so the full image was covered). Assuming the watermark is to stop people from copying the image, I wouldn't do a watermark in this way as you are still able to get at the non-watermarked image. – Pete Jan 02 '18 at 14:58
  • Well i'm mimicking the same thing on my computer (localhost) without a webserver and I am not getting it to show as you did in the fiddle. The original post is from here https://stackoverflow.com/questions/40853308/watermark-text-repeated-diagonally-css-html – Willy Jan 02 '18 at 21:12

0 Answers0