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)

Junior Member

10+ Year Member

joined:May 22, 2008
posts: 92
votes: 0

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 June 25, 2008 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
votes: 0

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 June 25, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:May 22, 2008
posts: 92
votes: 0

Pretty pleeeeeze? With sugar on top?
2:46 pm on June 25, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 10, 2006
votes: 0

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.


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members