Question

How do you put a (transparent) image over text to keep it from being selected?
I want my students to type what they see, not just copy/paste.

I’m not worried about them viewing source and copy/pasting from there – if they’re that savvy I don’t need to worry about them knowing the material.

Answer 1

I don’t believe that this is a great idea, and nor will it work particularly well. Also, without seeing what elements you’re using, I’m going to guess, with the following:

<p>Something not to copy...<img src="path/to/image.png" /></p>

CSS:

p {
    position: relative;
}

p img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

JS Fiddle demo.

A slightly easier way:

p {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JS Fiddle demo.

A slightly more reliable way (that doesn’t rely on updated/’modern’ browsers, but which isn’t requested in your question, as it uses JavaScript:

var paras = document.getElementsByTagName('p');

for (var i=0, len=paras.length; i<len; i++){
    paras[i].onmousedown = function(){
        return false;
    };
}

JS Fiddle demo.