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

Any links or sample code?

Thanks

Answer 1

What exactly are you hoping to accomplish with the watermark? You could probably use background images. That would be the easiest solution.

Answer 2

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 3

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

Answer 5

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