CSS gurus inside please....watermarking with css

[Oracle Porn]

im trying to watermark some thumbs

 a img{
	border: 1px solid #000000;
	width: 240px;
        height: 180px;
  	background:transparent url(play.png) bottom right no-repeat;

it works but the only problem is that my original thumb i want to watermark is OVER the play.png instead of UNDER it, anyone knows what i need to add? searching google for too long now

thanks

[grumpy]

make your image the background, put the watermark over it as a thumb

[SmellyNose]

make your image the background, put the watermark over it as a thumb

!rucnoc I

[Va2k]

Yea what grump said!

[quantum-x]

<div style="background: url(yourimage.png) top left no-repeat;"><img src="watermark.png" /></div>

[SmellyNose]

Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway.

composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg

Or, you could do something like this (untested):

for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

[Oracle Porn]

shit that would be impossible no way around it?

[Oracle Porn]

Or, if your server is linux, you could use 'composite' to make a watermarked version. I'd go with this approach because if you just use CSS people can download the original image anyway.

composite -gravity southeast -dissolve 15 watermark.jpg original.jpg watermarked/original.jpg

Or, you could do something like this (untested):

for file in `ls images/*.jpg`; do composite -gravity southeast -dissolve 15 watermark.jpg $file watermarked/$file; done

since these are thumbs that watermark is just a "play button", i have no need to hard watermark it. thanks for this anyway, worse come to worse ill do it.

[SmellyNose]

Or if your site is in PHP you could do something like this:

$base_dir = getcwd(); // meh
$f_file = $base_dir . $file;
$w_file = $base_dir . "/watermarked/".$file;
$water_file = $base_dir.'watermark.png';

$file = $_GET['file']; // Add security measures
header("Content-Type: image/jpeg");

if(!file_exists($f_file)) {
   readfile($base_dir . "invalid_image.jpg");
   exit;
}

if(!file_exists($w_file)) {
   readfile($w_dir);
   exit;
}

//Borrowed from http://articles.sitepoint.com/article/watermark-images-php as this is in a quick reply box so won't be writing new code as this is an example/idea :P

$watermark = imagecreatefrompng($water_file);
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($f_file);
$size = getimagesize($f_file);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark);

//Some code here to put the watermarked image into $base_dir . 'watermarked/'.$file so the image is cached for next time

[SmellyNose]

Ahhhh. If that's the case then the background-image being the actual thumb is best. Why can't you do that?

[calmlikeabomb]

It's called using the z-index and it only works when elements have a set position type.

Also, it's pointless and you should be using PHP or another language/software to create images with real water marks.

[Oracle Porn]

Or if your site is in PHP you could do something like this:

$base_dir = getcwd(); // meh
$f_file = $base_dir . $file;
$w_file = $base_dir . "/watermarked/".$file;
$water_file = $base_dir.'watermark.png';

$file = $_GET['file']; // Add security measures
header("Content-Type: image/jpeg");

if(!file_exists($f_file)) {
   readfile($base_dir . "invalid_image.jpg");
   exit;
}

if(!file_exists($w_file)) {
   readfile($w_dir);
   exit;
}

//Borrowed from http://articles.sitepoint.com/article/watermark-images-php as this is in a quick reply box so won't be writing new code as this is an example/idea :P

$watermark = imagecreatefrompng($water_file);
$watermark_width = imagesx($watermark);  
$watermark_height = imagesy($watermark);  
$image = imagecreatetruecolor($watermark_width, $watermark_height);  
$image = imagecreatefromjpeg($f_file);
$size = getimagesize($f_file);  
$dest_x = $size[0] - $watermark_width - 5;  
$dest_y = $size[1] - $watermark_height - 5;  
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);  
imagejpeg($image);  
imagedestroy($image);  
imagedestroy($watermark);

//Some code here to put the watermarked image into $base_dir . 'watermarked/'.$file so the image is cached for next time

thanks ill try it, i can't edit that actually page but only the css header and footer (not actually content aka thumbs)...thats the script i use

[SmellyNose]

thanks ill try it, i can't edit that actually page but only the css...thats the script i use

What does your HTML and CSS look like?

Might be able to come up with something if we can see the layout of the HTML.

Though, I definitely think you should edit the script you're using and do it by setting your image to the background image, and using the thumb image in <img src=''>

[MetaMan]

position: relative;
z-index: 0;

then for the overtop

position: relative;
z-index: 1;

then just use margin to adjust it over top of the thumb.
i suggest putting both inside a div.

[fris]

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

[Oracle Porn]

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

looks like this will be the only thing that will work, what i was originally looking for is the inverted version of this script, to always show the play button and on hover make it disappear.

[mafia_man]

Z-Index is the solution to what you are asking but it's not a good idea to watermark using CSS as people can still easily steal your photos.

Imagemagick is a tool you can use to watermark images on-the-fly either during upload or delivery.

[Oracle Porn]

z-index didn't seem to work cuz i cant edit actual html. the java posted above works, i need to invert it somehow.

[MetaMan]

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

[quantum-x]

It's called using the z-index and it only works when elements have a set position type.

Also, it's pointless and you should be using PHP or another language/software to create images with real water marks.

You're an idiot.

[Mutt]

the problem with using the thumbnail as a background image is that it is unclickable no?

i don't see the problem using CSS to add a watermark -look at all the TGP's that use CSS to add a little 'NEW' graphic on top of their thumbnails.

[Oracle Porn]

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

ofcourse z-index works, just not with this problem
like i said i can not edit html itself only the css

here is the html code

					
<div class="img">
<a   target='_blank'   href="http://www.link.com"><img src="thumb.jpg" width="240" height="180" id="thumbs4" name="thumbs4" alt="video" /></a>
</div>

[Oracle Porn]

the problem with using the thumbnail as a background image is that it is unclickable no?

i don't see the problem using CSS to add a watermark -look at all the TGP's that use CSS to add a little 'NEW' graphic on top of their thumbnails.

since its just a background i guess the original thumb with a link under it should work

[JD]

not being able to edit the html sucks :/ why cant you edit it btw?

[Deej]

position: relative;
z-index: 0;

then for the overtop

position: relative;
z-index: 1;

then just use margin to adjust it over top of the thumb.
i suggest putting both inside a div.

no z-index does work you just have no idea to explain your problem. we dont speak jew here.

completely awesome and the new avatar is totally freakin me out

[Oracle Porn]

thanks everyone for the help, i figured it out with the javascript fris posted

[bns666]

unless you are trying to do a hover effect, then best way it just to watermark it automatically.

here is an example of a play button on hover.

http://cssglobe.com/post/1238/style-your-image-links

for this, read this post exactly when i needed it.

[designerscode]

Z-Index is the solution to what you are asking but it's not a good idea to watermark using CSS as people can still easily steal your photos.

Imagemagick is a tool you can use to watermark images on-the-fly either during upload or delivery.

This guy is right, you may be able to watermark but knowledgeable ones know how to steal from under your nose... and its spotless too haha

[TheDA]

This guy is right, you may be able to watermark but knowledgeable ones know how to steal from under your nose... and its spotless too haha

You are also right but he's not watermarking to stop people from stealing his images