Add Watermarks to images using CSS and PNG
|Software - Web Design|
|Written by SPIRI|
By using this simple technique in collaboration with a Photo Gallery you can very easily auto apply watermarks to all your pictures.
A Watermark is a visible digital seal applied onto an image, providing further copyright information or hidden attributes. In this tutorial we are using visible watermarks.
The process we are explaining here is creating a transparent PNG image containing the watermark you want to apply to images.
Create a PNG fileStart your favorite image editor, create a new document (ie: 100x100px), design the watermark label you are using, give it a WHITE collor (#FFF), select the watermark you created, and in the Properties Inspector of your editor modify the opacity to 15%.
Give the image a transparent background and save it as a PNG image.
The HTML and CSS codingTo apply the watermark to your existing pictures all you need to do is overlay the PNG file onto the existing images.
For example if you have a Photo Gallery that uses the following code to display images <img src="your-gallery-image.jpg"/> all you need to do is just apply a DIV around the area displaying the images and append the PNG Watermark just bellow the actual image (inside the DIV).
The CSS Code:
The img.watermark is a class attribute that positions all images (assigned to this class) 4 pixels down and 4 pixels to the right, just so your watermark logo does not "touch" the margins of the picture it is applied to.
The HTML Code:
Note: Almost all modern browsers fully support PNG images opacity except for Internet Explorer 6.
Here is an example of a watermarked picture
written by Lola , October 05, 2007
Nice. Actually perfect, thanks!
written by JF , January 11, 2008
Muito bom, mas não mantem a integridade, ao baixar as fotos estão separadas
written by Adaptiv Media , January 26, 2008
This effect is very classy.
Much better than using php's GD image functions..
Thank you for the insight and all the best.
written by Jerry Chambers , January 26, 2008
I'm noticing this is not working in IE7
written by Imrac , January 27, 2008
It wouldn't be too hard to rip the image if the look in view source =/ Though still pretty good.
written by R.Lakshmi , February 06, 2008
I have create an watermark image , it's working fine in localhost , but while running online it's not working what is the problem? help me.
written by zhuzhu , April 20, 2008
CSS is client-side scripting. If the browser is not wking properly or not wking with the css, the picture will be displayed without the watermark. Isn't it safer to use server side script ie php to process the watermark?
written by Latha , April 22, 2008
how to create watermark images in fireworks without scripting and css
Can you please tell me the steps
expecting your reply soon
written by Sean , April 22, 2008
This isn't for everyone. If you are trying to copyright an image, this is pointless because anyone can still save the image and the watermark will no longer be there. I'm sticking with php and PNG IMAGE CREATE. However, this is a good solution if all you care about is branding, if you are doing an image feed where you don't own the image or anything similar. Thanks!
written by web design thailand , July 03, 2008
This is cool but is there anyway to make it workon IE6. There are many people still use this version.
written by Anees , December 04, 2008
its not working in ie6 .
how can i use transparent png in ie6 without using js please explin.
written by PrimeSiteUK , April 27, 2009
Thanks for sharing, very nice!
Works in IE8 ;-)
written by arronhunt , August 24, 2009
AWESOME! SO SIMPLE
written by cath , September 08, 2009
perfect! i've just made a reusable mask for my images saving me loads of time in the future - thanks :)
written by Avin , October 01, 2009
Great...its realy hehpful to me.Actually i am using IE6.So Thanks man.
written by avin , October 16, 2009
Nice informative posting
written by Muzika , December 29, 2009
If picture is not a square watermark is out of border how to solve this ...
written by alexa , January 27, 2010
nice but if the user were to save this image onto his computer he doesn't copy the water mark with it, is there a way the flatten/combine the watermark and image together in case visitor will save the image to his computer or will try to link the image to other website?
written by VidStatsX , February 03, 2010
Well, this was great for me. :) Overlayed a twitter bird with different url link in corner of profile avatars.
written by DZ , September 01, 2012
merci bcp pour ces informations
written by Leslie , September 16, 2012
You helped me! :)
Do you need more help? Ask now!
|Last Updated ( Friday, 07 September 2007 )|