CSS "Watermarking" Effect

This tutorial is going to teach you how to do an original effect with CSS background images, and your normal HTML-inserted ones.

The CSS "watermarking" effect is a mixture of using border, padding and background properties to style our image so we can add an "extension" onto it with a watermark. This is instant, and the pro is that you can use the same image elsewhere without the watermark. Nifty, huh?

So we'll take a normal image like the one below and style it with some CSS properties:

As anybody with basic CSS knowledge will know, padding, border and margin are in "layers" to the element which is to be styled. We'll add these to make the image below:

Here's the CSS:

The padding "pushes" the border outwards. As there's nothing left of the image, the background takes over. What are we going to do next? Here's what:

We do this by changing the background: property to this:

This repeats the gradient image sideways so it will stretch with the image. You can make your own.

We're almost there. Now just to do a few final touchups and make it look a bit more.. good.

If we wanted the background (or watermark!) to be on the right hand side of the image, we would just have the padding property applying to the right hand side. Replace the padding: property with:

Now we've got the padding only on the right. What if we modified the background image to something which we wanted to repeat on the right hand side to go along with the height? Here's how we do it:

We're done! Here's my result below, it's very basic but it gets the point across:

If you've got any questions, just leave a comment on the tutorial to get back to me and I'll answer them for you.