Add Watermarks to images using CSS and PNG

Software - Web Design

Written by SPIRI

This tutorial explains a simple way of using PNG image files and CSS Coding to apply a simple Watermark effect on your images. 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 file Start 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 coding To 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: #watermark_box { position:relative; display:block; } img.watermark { position: absolute; top: 4px; left: 4px; } 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: <div id="watermark_box"> <img src="your-image.jpg" alt="Your image"/> <img src="watermark.png" class="watermark" alt="Watermark image" /> </div> Note: Almost all modern browsers fully support PNG images opacity except for Internet Explorer 6. Here is an example of a watermarked picture PHP Forms In this tutorial you will learn the basics of working with forms using only one php file. Mail Form with PHP and HTML Learn how to create a MAIL FORM using PHP and HTML. Formatting your Adobe Flash8 website using CSS In this tutorial it will be explained how to format an Adobe Flash 8 website text by using CSS. Mod rewrite PHP to HTML htaccess In this tutorial you are going to learn how you can rewrite all your PHP pages to HTML using a simple .htaccess rule for better search engine indexing. This is a basic page.php to page.html htaccess script. Subscribe now via RSS feed and get all the new tutorials 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 SPIRI , January 27, 2008 Of course it wouldn't be hard to rip the image but the purpose of this is not protecting images. Its main purpose is styling and adding additional info to images. written by R.Lakshmi , February 06, 2008 hi, 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? http://www.epiclosers.com/ 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 Thank you! You helped me! :) Do you need more help? Ask now! Comment Name Email Website   Add Comment Trackback(0) Comments (22)

Last Updated ( Friday, 07 September 2007 )