How to Apply Watermark Effect to an Image Using CSS

Create a watermark in the images of your website is best way to protect the images from being used by another person. I had already shared a post on adding watermark to an image with PHP. In this post I will show how to add watermark effect on the image with the help of CSS.

The idea behind this trick is to add an image just above the another which will look like a watermark on the image. See the code below

<div style=”border:0;”>
<img src=”deepanker.jpg” width=309 height=459></img>
<div style=”position:relative; left: 0px; top: -159px; width:150px;”>
<img src=”logo.png” width=200 height=100>
</div>
</div>

Change the hieght and widhth of the images according to your images size. To change the location of watermark image, change the position of div which is placed inside.

To add a text watermark use the code given below

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

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest updates, web design resources and tools.

You have Successfully Subscribed!

About The Author

  • ADD YOUR COMMENT

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Receive fresh web design resources and SEO tips in your email by our weekly newsletter

You have Successfully Subscribed!

Pin It on Pinterest

Share This

Share This

Share this post with your friends!