text watermark on website? how to do it?

Tim picture Tim · Sep 16, 2008 · Viewed 69.8k times · Source

I am a C++/C# developer and never spent time working on web pages. I would like to put text (randomly and diagonally perhaps) in large letters across the background of some pages. I want to be able to read the foreground text and also be able to read the "watermark". I understand that is probably more of a function of color selection.

I have been unsuccessful in my attempts to do what I want. I would imagine this to be very simple for someone with the web design tools or html knowledge.

Answer

user136776 picture user136776 · Mar 21, 2010
<style type="text/css">
#watermark {
  color: #d0d0d0;
  font-size: 200pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:-100px;
  top:-200px;
}
</style>

This lets you use just text as the watermark - good for dev/test versions of a web page.

<div id="watermark">
<p>This is the test version.</p>
</div>