0

How does one achieve a text-on-text watermark in HTML and CSS (and javascript if that keeps it cleaner)?

The answers to this earlier question seemed to assume that the foreground was a single "img". But my question is for when the foreground is multi-paragraph text. The background text, typically one word "Draft", should be specified just once and repeated arbitrarily.

Thanks.

David Lee
  • 1
  • 4

1 Answers1

0

easiest way to achieve that is the use of a box with an absolute positioning. You can place then everythign you want there. With the RGBA color value you can set the transparency so low, that it will be transparent enough to not hide the actual content.

.watermark {
  color: rgba(255, 0, 0, 0.2);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 5px;
  text-align: center;
}
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<div class="watermark"><h1>IAM A WATERMARK<h1></div>

To repeat that text, you can use it as string and use a string repeater with JS. With the term string repeater you should find enough guides and examples.

tacoshy
  • 10,642
  • 5
  • 17
  • 34