I have always been offended by the widespread use of my pictures on other people's web sites. I know that I risk this type of copyright violation when I post my pictures out there, and it's not like I don't want to share, but I just hate it when people grab my stuff without asking.

Protecting your images on the web can be a chore. Watermarking is the only surefire way of stamping your images in a way that reveals their origin when they are used – with or without your consent. A watermark is usually a text or logo embedded visually into the image file itself in such a way that it disturbs as little as possible while still being very obvious and hard to remove. Watermarking can also be invisible, but this method is not that common on the web.

Watermarking is essentially done in two ways:
1) client side, in a photo-editing program where someone manually or automatically embeds the message in the file before it's uploaded
2) server side, where the server embeds the watermark once after upload or every time the image is displayed

Both methods are efficient seen from a copy-protection perspective but also pretty demanding on resources and technology in the form of manpower or programming and photo-manipulating capabilities and processor resources on the server.

I wanted a simpler way of stamping my images and started fiddling with CSS as a tool for the purpose. What I wound up with was an easy and simple method, which in spite of its “pseudo-watermarking” still gets the main message through and at the same time deters the less technology-savvy from copying the image. Since the watermark is not physically embedded in the image file, anyone with a some technological knowledge can find the source of the image and download that. But most users will not be able to see though the system immediately.

The method is quite simple: I display the image that I want to show as the background in a div that lies behind an img-code, which just contains a transparent gif-file. Between the two I sandwich another div with the watermark, either as an image or as HTML-text. What I get from this is that the user sees the image in question overlaid by the watermark, but both as CSS elements.
If the user uses the right click menu or drags the image to save or view it, all that is seen is the one pixel transparent gif that is in the img-code itself.
By controlling the position and size of the div's and setting them to the exact same size and position as the picture, which I want the user to see, I get all these elements stacked neatly on top of each other.
At the same time I center the rear background image (the main image) and adjust the copyright notice (the middle image or text) to the position where I want it. You can place the watermark where you please, but in my working projects I have found that the upper right hand corner is the most practical because I just want the watermark out of the way.

I started out with a simple image file with my copyright notice. But that gives me a few disadvantages: the image has to be a “clean” gif or png with a solid color text and a pure transparent background. I can't use any subtle transitions because I can never be sure what the background color is. As a result of this, the text will be jagged and rough looking.
A solution could have been 24 bit png's with alpha transparency, but since IE 6 doesn't support these, that will rule out too many users.

The final HTML-outline for this solution winds up something like this:
<div style=”background : url(image)”>
<div style=”background : url(watermark)”>
<img src=”transparent_image” />
</div>
</div>

The reason that I don't use the watermark as the front picture and just work with two layers, is that I want the front image to be able to scale with my main image so that it's fully covered. If the watermark was embedded as an image in the front img-layer, it would have to transform depending on the proportions of the main image. In stead I can now control the size of the watermark no matter what size my main image is.

To get this to work properly, you will need to have proportions on the outer div corresponding to the image you want to display.

Although the above solution is viable and useful for symbols or image-watermarks, I want something better looking. So I fooled around with plain HTML-text in stead. I just want the word “copyright” and a copyright symbol, so this is an obvious solution. Embedding the text in a styled div will also enable me to make it semi-transparent, which is exactly what I want. In the end this solution will give me much more control over content, size, color, rendition and all other aspects of my copyright notice.

I work with this general scheme:
<div style=”background : url(image)”>
<div style=”background : url(transparent_image)”>
<div style=”opacity : 0.8”>
Copyright notice
</div>
</div>
</div>

One major disadvantage of this construction is that removing the style sheet will also move the main image, since it is rendered as a CSS background. The result will be that clients, which ignore the style sheet, won't see any image. This can be avoided by actually setting the proper image in an img-code behind the transparent gif, but hiding it through CSS (display:none). This has the effect that the removal of the styles will reveal the real image while hiding the rear, background one and the transparent overlay. As an added bonus this process even renders the copyright notice as plain text right after the image.

This is how this solution looks in a simple outline:
<div style=”background : url(image)”>
<div style=”background : url(transparent_image)”>
<img src=”image” style=”display:none;” />
<div style=”opacity : 0.8”>
Copyright notice
</div>
</div>
</div>

What I finally produced was a PHP-function that would create this code for me on the fly, taking the image and a bit of text as arguments. This now enables me to show watermarked images quickly and easily.
It has the advantages of being easy to implement and it demands very few resources. The disadvantage is that it is fairly easy to circumvent for the savvy user, but to most it will "technically hide" your images while still leaving them visible to humans.