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

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.