Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

text watermark on website? how to do it?

Tags:

html

watermark

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.

like image 342
Tim Avatar asked Sep 16 '08 01:09

Tim


People also ask

How do you put a watermark on a website?

Right-click anywhere on the page to which you want to insert a background picture, and then click Page Properties. Click the Formatting tab. Select the Background Picture check box. Select the Make it a watermark check box.

How do you put a watermark on text in HTML?

To add a watermark to an HTML page: Add <div id="watermark">MESSAGE</div> at the bottom of the page. Position it accordingly – #watermark { position: fixed; bottom: 0; right: 0; z-index:999; }


1 Answers

<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>
like image 92
user136776 Avatar answered Oct 06 '22 07:10

user136776