CSS: Prevent Right-Click Save As on your Webpage Images with Transparent Layers

Contributed by William_Wilson March 26, 2006  
Tagged: Web application programming

quick cascade style sheet addition to your images to prevent the right click save as option and keep your images your own. Applies a trasparent barier to be saved instead.

This will not stop the ever persistant person from stealing your images, but it will cause them a bit more work for each image they wish to take.
******************************************************
Update!
-Although below does do what it claims, it does not stop saving it as a background. So here is a better fix!

Updated Example
First create a 1pixel by 1 pixel transparent image (or copy the one from the example above)

now when insterting your images insert them with a $div# tag which allows for layering of images and apply it as a background:

$div style="position:absolute; top:10; left:10; width:400; height:75; z-index:1; padding:0px; border: #000000 1px solid; background-image:url(yourImage.ext);"#$/div#


in your header create the following css script:

$style type="text/css"#
$!--
div#cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background-image:url(overlay.gif); image-

repeat:repeat;

--#
$/style#


now inside the div of the image you wish to proctect apply this transparent overlay, by placing the following:

$div id="cover"#$/div#


yes it is another background div layer, but this one will sit above the other one, removing the usefullness of the right click. Even when view background image is chosen, it simply shows the 1 pixel transparent image placed over top.

the full html page:

$html#
$head#$title#Overlay Example$/title#
$style type="text/css"#
$!--
div#cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background-image:url(overlay.gif); image-repeat:repeat;

--#
$/style#
$/head#
$body#
$div style="position:absolute; top:10; left:10; width:400; height:75; z-index:1; padding:0px; border: #000000 1px solid; background-image:url(yourImage.ext);"#$div id="cover"#$/div#$/div#
$/body#
$/html#


view the example to see the effect, it works for both Internet Explorer and Firefox. I have avoided the layer-background-image feature on purpose as it is not globably supported and your images may not be protected, or just simply not seen at all!

******************************************************
this example has the image in a table, for an example in use check out:
Signatures
*this is a list of signatures and creation of I did for a friend, but attempt the right click and and it cannot be saved.

$td height=98 width=416 style="background-image:url('http://www.marvingohan.com/images2/NH/1full.PNG')"#


Works for Firefox and Internet Explorer, and probably all the rest.

Questions/Comments: william_a_wilson@hotmail.com
-William. §