Create a watermark effect with CSS

In 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.

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.

Recommended further reading:

---

Mastering CSS for Web Developers (Smashing eBook Series) Are you stumped by the rather sophisticated nature of CSS? Getting a grip on this still dewy technology isn’t quite as hard as you might think. Connecting the dots is easier when you have all the vital facts within reach….

---

CSS3: Visual QuickStart Guide (5th Edition) With CSS3: Visual QuickStart Guide, readers can start with a tour of the stylesheet language, or skip ahead to any chapter of the book to look up specific tasks covering just what they need to know. This task-based, visual reference…

---

Smashing CSS: Professional Techniques for Modern Layout (Smashing Magazine Book Series) PROFESSIONAL TECHNIQUES FOR MODERN LAYOUTSmashing CSS takes you well beyond the basics, covering not only the finer points of layout and effects, but introduces you to the future with HTML5 and CSS3. Very few in the industry can show you…