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.

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:

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

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.

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

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:

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: