Adding a watermark using css

[bravo14]

Hi Guys

 

I am creating a before and after gallery, and I want to add a watermark to each photo using css.  The watermark will be the same size as the actual photo, mostly transparent, but will have either Before or After placed on it.

 

I am guessing that it would be done as a background image, but who would I get the background to display on top of the main photo?

 

All I have as a class for the before photos at the moment is

.before{
background-image:url(/images/watermark_before.png);
}

 

And I am not sure where to go from here, any help would be much appreciated

Cheers

 

Mark

[cssfreakie]

you need to place an image holder (for the watermark) above the normal image by using a position of absolute  (position:absolute;)

You also need to give the normal image a position of relative to set a reference point for the absolute positioned element. Otherwise any other element with a position other than static is used as reference and if that does not exist the body will be the reference point.

 

Although you can do this with css as described above, you need to keep in mind that this does not prevent the end user from removing this watermark. If your looking for a more permanent measure you might want to have a look in to de gd library of php.

 

http://www.google.nl/#sclient=psy&hl=en&source=hp&q=watermark+php&aq=f&aqi=g5&aql=&oq=&pbx=1&bav=on.2,or.r_gc.r_pw.&fp=979c06cd3d3a36aa&biw=1280&bih=676

 

If you need help with the css method, ones you read about positioning absolute and relative. let me know.