Create a watermark effect with CSS

Create a nice watermark effect with CSSIn some situations it can be handy to display information in a image as a watermark.

Traditionally, watermarks are added manually by graphical programs like Photoshop, which can be very time consuming.

Adding watermarks with CSS can make it very fast and flexible to add a watermark to many images.

In this post we’ll build a simple CSS class that can display a text on top of a image like a watermark

Why a CSS watermark?

A CSS watermark is a good and stylish way to display information like site name in a image.

You can also add watermark with Photoshop and other graphical programs, however these watermarks has to be manually added to each image, which can be a lot of work.

With CSS images you can dynamically add the effect to each image, which saves time.

However if you want to add the watermark for copyright protection of your image, the CSS method isn’t optimal, since the effect is only a overlay in the browser. if somebody copies the image from your site the CSS watermark isn’t included in the image.

The watermark CSS

To create the CSS watermark effect, you need to create a image with black background and white watermark text. This watermark image needs to be the same size as the image that you want to apply the watermark effect to.

Background image for CSS watermark effect

In the CSS, the watermark image is used as background and made semi transparent.

.water-img {
 background: #000 url(img/watermark.jpg) no-repeat;
 width: 500px;
 height: 335px;
}
img.watermark {
 filter:alpha(opacity=75);
 opacity:.75;
}

To apply the watermark to a image, the image needs to be wrapped in a DIV, and the watermark class needs to the image. needs to be

<div class="water-img">
 <img class="watermark" src="img/beach.jpg" alt="" />
</div>

See the example code here

Conclusion

This CSS effect if very effective for images that are standardized in width and height, since the effect is based on a fixed size watermark image.

You can easily play around with the watermark effect by changing the position of the watermark text, eg. in a corner or as diagonal text.

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

4 Replies to Create a watermark effect with CSS

  1. David says:

    Worth nothing if the person still can save the image on their desktop.

  2. jhnidk says:

    Exactly, that’s why I’m calling it a watermark effect and not a watermark.

    The trick can still be useful for adding graphical effects to images.

  3. Superman says:

    Very useful technique for the shopping carts where you just want to show that this product is for sale or sold out :) Thanks dude for your work. Keep it up.

Trackbacks for this post

  1. Tweets that mention Create a watermark effect with CSS | Tips4PHP -- Topsy.com

Comments are now closed for this article.