text watermark on website? how to do it?

Question

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 pag

Answer 1

You could make an image with the watermark and then set the image as the background via css.

For example:

<style type="text/css">
.watermark{background:url(urltoimage.png);}
</style>
<div class="watermark">
<p>this is some text with the watermark as the background.</p>
</div>

That should work.

Answer 2

As suggested, a png background could work, or even just an absolutely positioned png that sizes to fit the page, but you are asking in a comment about what would be a good tool to create one -- if you want to go with free, try GIMP. Create a canvas with a transparent background, add some text, rotate it and resize as you'd like, and then reduce the layer's opacity to taste.

If you'd want it to cover the whole page, make a div with the class 'watermark' and define its style as something like:

.watermark
{
   background-image: url(image.png);
   background-position: center center;
   background-size: 100%; /* CSS3 only, but not really necessary if you make a large enough image */
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   z-index: 10;
}

If you really want the image to stretch to fit, you can go a little further and add an image into that div, and define its style to fit (width/height:100%;).

Of course, this comes with a pretty important caveat: IE6 and some old browsers might not know what to do with transparent pngs. Having a giant, non-transparent image covering your site would certainly not do. But there are some hacks to get around this, luckily, which you'll most likely want to do if you do use a transparent png.

Answer 3

<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>

Answer 4

If you add "background-attachment: fixed" to the css in kavendek's suggestion above, you can "pin" the background image to the specified location in the window. That way, the watermark will always remain visible no matter where the user scrolls on the page.

Personally, I find fixed background images to be visually annoying, but I've heard site-owners say they love knowing that their logo or copyright notice (rendered as an image, presumably) is always right under the user's nose.