Add Watermark with CSS?

Question

I have an image in a div. I need to add a watermark, or basically another image, overtop the image the div. How can I do this with css? Any help would be greatly appreciated.

Example code:

<div id="image">
</div>

css:

#image {
   background:url(images/images.png) no-repeat;
}

Answer 1

Are you sure you want to do watermarking on client-side? Doing so basically defeats the whole purpose of having a watermark. What you'd want to do is to server an image which already contains a watermark. Do to so, you'll have to write server-side code.

Answer 2

You could potentially use a transparent PNG to overlay two images, but you really do want to do this on the server since client-based solutions are easily defeated and don't really protect anything.

Answer 3

Your solution:

CSS:

#watermark{
   background:url(images/watermark.png) no-repeat; 
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}
#image{
   width: 100px;
   height: 100px;
   position: relative;
   top: 0;
   left: 0;
}

HTML:

<div>
<div id="image"><img src="..." /></div>
<div id="watermark"></div>
</div>

Far better solution:

Some people couldn't break through an overlay watermark, but some people can. It's highly recommended to use something server side watermarking, e.g: the imagemagick lib.

Answer 4

Comment to previous posters: The purpose of a watermark may or may not be related to security or copyright. He might just want to make a print-out pretty, or distinguish "draft" from "final", or any of dozens of other reasons.

Answer 5

There are at least two ways to do this, one of which has sort of been touched-on by @erenon's answer.

To meet your requirements and use an image:

<div id="image">
    <img src="path/to/watermarking_image.png" alt="..." />
</div>

With the following CSS:

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image img {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

This should generate something like the following:

   +--------------+--------------+
   |              |              |
   | 'watermark'  |              |
   |              |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

The alternative way, assuming all you want to 'watermark' with is 'one word,' is to use words:

<div id="image">
    <p>Watermark text</p>
</div>

And the following CSS:

#image {
/* the image you want to 'watermark' */
height: 200px; /* or whatever, equal to the image you want 'watermarked' */
width: 200px; /* as above */
background-image: url(path/to/image/to/be/watermarked.png);
background-position: 0 0;
background-repeat: no-repeat;
position: relative;
}

#image p {
/* the actual 'watermark' */
position: absolute;
top: 0; /* or whatever */
left: 0; /* or whatever, position according to taste */
opacity: 0.5; /* Firefox, Chrome, Safari, Opera, IE >= 9 (preview) */
filter:alpha(opacity=50); /* for <= IE 8 */
}

This should generate something like the following:

   +--------------+--------------+
   |              |              |
   |  watermark   |              |
   |    text      |        __    |
   +--------------+       /  \   |
   |                     (    )  |
   |               /\     \  /   |
   |              /  \     ||    |   <-- Picture. Of...something. O_o
   | /\          /    \    ||    |
   |/  \________/      \_()||_()(|
   +-----------------------------+

I realise that this question was probably answered to your satisfaction, but I hope this is of some use to you, even only as general information.