Jump to content

Adding a watermark using css


bravo14
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.