People take pictures more than ever before. Digital cameras and mobile phones equipped with cameras have dramatically increased the number of pictures taken today. Prices on cameras are getting down all the time making it even easier to start shooting the world. Many photographers love their work. Pictures are individual property and in addition to telling the target photographed they also tell a lot about the shooter himself. No picture is worth anything unless it has some value to the owner or the audience. Value usually comes with price. Therefore it is understandable to keep this value, the copyright, and tell the audience who is behind the picture they are looking at.

Photographers in the early days used to sign their work on the photo background. Today it’s almost impossible to show the back of the picture as so many photos are published on the Internet. The net lacks the other side of the photo, the background. And who would be interested in it anyway? Millions of pictures come and go each day and no one has time to peek behind them. That’s why the valuable information, the owner’s copyright, is printed on the picture instead.

Usually the copyright information is displayed as a watermark, a dimmed text or symbol on the photographed object. Placing such a watermark requires extra work if there is no automatic system to add it. Many tools provide an easy way to attach the watermark, but they still need to be placed manually. Some websites have services that attach the required watermark, but if the photographers are running their own websites, they would need such a system of their own. Popular scripting language PHP would do the trick with a little effort. This technique, however, requires some programming skills not so common to photographers. Another approach would be standard CSS technique. CSS has excellent tools to implement a watermark on pictures.

Watermarking photos with CSS is relatively easy. The trick is to place the watermark object on the picture using the CSS opacity property, which was introduced in CSS3 color module (see the picture on the right). Using this property may not work in all browsers, and even Internet Explorer is missing this capability as a standard built-in feature. Firefox seems to render the transparency with this opacity property, but some versions may need little help with a trick or two. Watermark is semi-transparent object that shows through the underlying picture still giving the illusion of something extra added to the photo. Watermarks do not usually disturb looking the picture but may prevent unauthorized use of it. CSS technique does not glue the watermark in the picture and the original photo would still be downloadable without the annoying copyright message.

Placing a CSS watermark needs two div elements that I call here "layers". These layers are nested so that there is one div outside and one inside the other. The outer div simply holds the picture to be marked and the inner div contains the watermarking object. The watermark object can be an image or plain text. Standard HTML does not provide layered objects, so we need to show the original picture as a background image of the outer div element. In the following example I use plain text as the watermark object. This style defines the outer div for the photo:

The definition also sets the foreground color to display the watermark text in white. Picture size is important to make the outer div large enough to show the whole picture. Setting the line height will vertically center the watermark text. The next definition styles the watermark:

One important part of this class is setting the opacity. CSS3 instructs setting the opacity property, but as stated earlier some browsers do not recognize the property. For Internet Explorer we need to place a tricky filter property and for Mozilla-based browsers even more cryptic -moz-opacity property. The most important value is the width property. Without setting this value the semi-transparent watermark would not show as intended in Internet Explorer. The needed HTML code follows:

The watermark object in this example has a copyright symbol as plain text. Of course you may set any text or even an image to be displayed as watermark. This example is a simple way to quickly protect your pictures with copyright notice as a watermark. Exploring the CSS further you may find other uses of this technique as well.