A question about selecting images

Hey all i’m new here and found this site quite useful to ask my question. So, I wanted to know how to avoid images on my website from getting selected. Now what I mean is, check out [B]this site[/B] and there you’ll find the image “Free forever. Sign up today!”… We are unable to drag or select it! How do we do that? I hope you know what I mean.


Welcome to SitePoint.

That’s yet another unsung advantage of using CSS. What you are seeing is background-image (part of the CSS) to an element and not a IMG tag. This is why you cant select it or D/L it.

assuming you had a 150 x 50 px image named myImage, here is hands on example:

<p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<p>
p{padding: 10px 10px 150px 10px; background: url(myImage) no-repeat center bottom; }

You can now see the image centered at the bottom or your paragraph and the TEXT CONTENT can be selected and copied, but not the image.

Hope that helps.

Ok so does that mean if my image (myImage) is just a transparent image, I can hide any text behind it?


Is your aim to prevent visitors copying the image (either by right-clicking and selecting “Save as”, or by copying to the clipboard)?

If so, then using a background image won’t achieve that. Depending on the visitor’s browser, they might be able to “view background” (which will open a new browser window, with the image displayed as a normal image), or use a tool like FireFox’s Page Info (which gives direct access to each individual image).

If your reason for preventing the image being selected is purely cosmitic, then none of this applies.


That text, as you’ve seen, is in an image that is otherwise transparent. So if you are asking about hiding text behind this image, then the answer is really No, because the text will show through the image. It’s a good idea to provide text for those who can’t see the image, but to do it well, it’s best if the image isn’t transparent. If the image is transparent, you can have the text there but move it way off screen. That way, it can be read with CSS off or by screen readers, but people with images disabled won’t see the text. So ideally, use a non-transparent image. This is called “image replacement”. Here’s an example of it:


Of course, as others have said, this may not be what you are asking at all. :slight_smile:

Ok just in short, my aim is that no one can just click and drag the image to url box. I want that if someone does so, the text would be highlighted instead.

Greatest example, GOOGLE!

Now if you goto the 404 page of google (click here), you’ll see a picture of a robot… right? That robot cannot be dragged anywhere compared to the google logo.

Now thats what I mean… How do we do that?

[FONT=Verdana]It’s a background image:

body {
    background: url("//www.google.com/images/errors/robot.png") no-repeat scroll 100% 5px transparent;
    padding-right: 205px;

(And as Mikl said above, it’s very easy to save in Firefox by right-clicking and choosing “View Background Image”.)

Ohh dint notice that… but still how do we do the thing I mentioned? Select text instead of image ?

I know that there are many ways for viewing the images, but I want my site to look kinda pro! :stuck_out_tongue:

Sorry - I’m not really clear what you’re trying to achieve here. You want to hide the image and display text instead any time somebody clicks one of your images?

Hmm… NO. Ok here is the final thing I could do.

Here is a picture from a certain part from my website.

Over here you can see the image “Upload”. I can actually click and drag the image anywhere.

But what I wanna do is, No one can drag the image like that… Here is a pic of what I mean (somewhat)

The text is selected (highlighted) instead of the image
If you understand what I mean… The image is there, the text is also there, but when someone tries to drag that image, the text is highlighted instead.

Hope that helps.

I’m still lost - that just looks like a background image to me. A background image won’t be selected unless somebody actively chooses to select it. Isn’t that what you want? Of course, that assumes that your image is purely decorative, because you can’t add alt text to a background image. If it’s a necessary part of the content, you shouldn’t insert it as a background image.

Ok can you just tell me is it possible to add a transparent image over any text so it cannot be selected?

You mean so that the text can’t be selected? Yes. You’d need to have a very good reason for doing it, though. Anything that prevents “normal” behaviour, as web users have come to expect it, is liable to severely irritate your visitors.

Holly crap… I never new about FF view bg images!!! For the longest time whenever i wanted to obtain a bg image from someone website I went to VIEW SOURCE, searched for ‘.css’ and scanned the code for the appropriate css rule… then followed that link. Which goes to show that even in handy browsers like FF, if someone really wants your image they will get your image.

You could generate a pseudo element and use AP to pace it above your text/image.
p:after{position: absolute; content:“”; top:0; bottom:0; left:0; right:0;}

Be forewarned that they won’t be able to click on any of the links that are covered by the pseudo element either. As TechBear said, this is bound to just annoy users rather than protect you. But still, if someone wants your text they can just view source and copy it. In short if you don’t want to share something… don’t post it on the web.

I’m sorry i’m not trying to be annoying, but i’m quite weak in HTML and still in learning progress. How do you use the code you gave me above? Does that code place a transparent image over text if I have any? Or if you could give me a certain code to do so if my transparent image is " tpimg.png "


Print Screen is easier :smiley:

How do you use the code you gave me above? Does that code place a transparent image over text if I have any?

It does exactly that. Clear your mind and just follow and you wills ( other wis its really difficult to explain) Each HTML element can create up to TWO pseudo elements with CSS thus :before and :after;
so .coverup:after {content:“”;} creates an element after the last character in the element with class “coverup”

you will want to position this pseudo element element so it’s exactly the same size as your ‘coverup’ element and put it ABOVE your content element so in a sense it interferes with the cursor when the cursor hovers over the ‘coverup’ element.

so now the code is :
.coverup:after {content:“”; position:absolute; z-index:10000}
.coverup {position:relative}

almost there, but we still need to make sure the pseudo element covers all of the ‘coverup’ element for this we use top:0; left:0…ect. so the final code is

you do this by giving cover up position:relative; and giving the pseudo element position absolute and a a z-index of a high number

.coverup:after {content:“”; position:absolute; z-index:10000; left:0; right:0; top:0; bottom:0;}
.coverup {position:relative;}

To see this in action, put those rules in your CSS. and give some element that you want to be unhighlightable class=‘coverup’

if ON TOP OF THAT you want to place an image… you canmake the pseudo element rule as follows:
.coverup:after {content:“”; position:absolute; z-index:10000; left:0; right:0; top:0; bottom:0; background: url(path/to/your/images/yourPNG.png) no-repeat center center;}

( Still if you test is up on the web some can still copy it either by going to ‘view source’ or simply paper and pencil… if you don’t want info copied… really the only way is NOT to put it up on the web)