homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Can CSS layer a transparent image to prevent copying?
CSS copy protection

5+ Year Member

Msg#: 3682850 posted 1:21 am on Jun 25, 2008 (gmt 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



5+ Year Member

Msg#: 3682850 posted 2:18 am on Jun 25, 2008 (gmt 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.


5+ Year Member

Msg#: 3682850 posted 3:01 am on Jun 25, 2008 (gmt 0)

Pretty pleeeeeze? With sugar on top?


5+ Year Member

Msg#: 3682850 posted 2:46 pm on Jun 25, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved