Embeding Watermark Using CSS

This tutorial shows how to add logo or watermark to images without altering the original image.

Here's an example of an image without a watermark:

Here's what we want to accomplish, notice the watermark/logo on the bottom left of the image. This is done without altering the original image.

Basic Approach
The idea is to combine the two images (the actual image and the watermak image). The watermak is superimposed on top of the image. The benefit of this is that the original image is unaltered and the logo can be changed without changing any of the images that use the logo. The drawback is:

This method does not alter the original image, thus if a user saves an image, the watermark will not persist. If you're interested on putting permanent watermark, do not use this method., (For alternative, see about using gd library to embed the watermark).

The code is as follows and in the rest of this tutorial, I explain why this approach is taken.

<div style="border:0;">
  <img src="images/dropShadowSquare.png" width=309 height=159></img>
  <div style="position:relative; left: 0px; top: -159px; width:150px;">
    <img src="image.jpg" width=300 height=150>

Let's start with the images, here's the actual image:

Here's the watermark/logo image:

Let's start with putting the watermark image below the other.

<img src="images/volcano.jpg"/><br /><img src="images/logo.png" />

What we need to do is to nudge the watermark upward so that it overlaps the image. A first attemps might look like this:

<img src="images/volcano.png"></img></br>
<img style="position:relative; top: -19px;" src="logo.jpg">

We assign top: -19px to nudge the watermark upward, onto the space occopied by the image . The negative number causes the watermark to be pushed upward 19 pixels (19 is the height of the watermark, yours may vary).

This looks like a perfectly working solution, but if you look closely, there's a slight problem. THere is a vertical gap below the image. This gap is the space originally allocated for the watermark <img> and it becomes hollow because we nudged the image. For many purposes, this is not a big deal, but why not try to remove it? We can do that by confining the images to stay within a <div> block like below:

<div style="margin-bottom:-19px; overflow:hidden;">
   <img src="images/volcano.jpg"/><br />  
   <img style="position:relative; top: -19px;" src="watermak.png"/>

The margin-bottom: -19px is to counter the height of the watermark. The overflow: hidden is to hide the space allocated for the watermark.


Below is another example. When creating the logo, I recommend png because it allows smooth alpha such as below showing the same image with a different watermark file.

You can also overlay plain text onto the image like this example:

<div style="margin-bottom:-49px; overflow:hidden;">
   <img src="images/volcano.jpg"/><br />
   <div style="position:relative; top: -20px;"/>Enter text here</div>

This is a text.