Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Can CSS layer a transparent image to prevent copying?

CSS copy protection



1:21 am on Jun 25, 2008 (gmt 0)

5+ Year Member

Is it possible to use CSS to put a transparent image on top of your text to prevent people from selecting and copying text?

I know you can do it with JavaScript and a transparent image, but is there a way to do it without JavaScript?

I know that there is no fool proof way to protect your web content, but I would like to make it less convenient for people to copy and paste my articles.

Thank you


2:18 am on Jun 25, 2008 (gmt 0)

10+ Year Member

yes, tis an old trick but works on the majority of non-webmasters ;)

Create a 1px transparent gif.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
#realimage {
background:url(the-real-image.jpg) no-repeat;

<div id="realimage">
<img src="1px-transparent.gif" width="267" height="200" alt="all images copyright">

whoops you said text !
Yes use z-index. although im not giving an example as there's nothing more annoying than not being able to select a peice of text and drop it into a search engine to learn more.


3:01 am on Jun 25, 2008 (gmt 0)

5+ Year Member

Pretty pleeeeeze? With sugar on top?


2:46 pm on Jun 25, 2008 (gmt 0)

5+ Year Member

This is sort of like those scripts that alert whenever you try to right click. It's a good idea, but it doesn't do anything effectively enough to warrant it. Any time I encountered a script like that I just rolled my eyes and went to the view menu.

If someone wants your text enough they are going to get it.

That being said, appi2 is correct, but the ability to select text starts from any text point on the page and can't be blocked by images too effectively. If you set an image's height and width to the height and width of the document, you could prevent clicks from getting to the bottom (with an appropriate z-index), but this can also interfere with such things as clicking links and accessing forms.

I know what you're thinking, Z-Index links and forms. But then you expose the body at a point where the user can click and drag, defeating the entire purpose.

So my suggestion to you is that if you do not want your content to be copied at all, the safest way is to not make a site. Abstinence, as I recall, is always the safest method.

If you were really, REALLY ansy, you could use absolute positioning, throw an image over everything, and then have all your map links go to the appropriate pages and bring focus to the appropriate elements. But srsly, it's not even worth it because they can still view your source or just, heaven forbid, type it into notepad.


Featured Threads

Hot Threads This Week

Hot Threads This Month