Posted in Code Snippet CSS Tutorial website design

How to Apply Watermark Effect to an Image Using CSS

How to Apply Watermark Effect to an Image Using CSS Posted on December 14, 20112 Comments

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

watermarking plugins
Best WordPress Hosting

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>

Advertisement

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>

advertisement

Deepanker Verma is the CEO of Techlomedia and a full time blogger. On this blog, he shares web design resources, SEO tips blog monetization tips.

2 thoughts on “How to Apply Watermark Effect to an Image Using CSS

  1. I want to use watermark with many times brand name. Is it okey for SEO, or Google will recognize this like keyword stuffing?

Leave a Reply

Your email address will not be published. Required fields are marked *

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!