Preventing images and text to be selected

Question

I have an image being hacked in as a background image (as shown here). I've noticed that if I drag my mouse over it though, it selected the image so that it can't be deselected. I've tried the following code to no avail:

    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        img#bg {
            position:fixed;
            top:0;
            left:0;
            width:100%;
            height:100%;
        }
        #content {
            position:relative;
            z-index:1;
            top:0px;
            left:0px;
        }
        *.unselectable {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            -o-user-select: none;
            user-select: none;
        }
    </style>

Any ideas?

possible duplicate of [css rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) — kapa, May 06 '11 at 17:45
I think you should be using `-moz-user-select: none;` instead of `-moz-user-select: -moz-none;`. Otherwise, I think this should work. — Joshua Carmody, May 06 '11 at 17:49
PS If you want a nice background stretcher use bgStretcher.js Works on my site like a dream- But i hacked it to my own version cache / preload images cause i load HD images.. and hardcoded noSelect in there.. — Piotr Kula, May 06 '11 at 17:58

Piotr Kula · Accepted Answer · 2019-05-03T13:26:49.700

50

Add this to your style sheet

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

.selectEnable { 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Just add the class selectDisable to the element you want to prevent from being selected.

The drag effect occurs on webkit(chrome, safari, opera). It does not happen on Firefox.

Don't this apply to your whole document if you have textual content because then you won't be able to select text, which is not very user-friendly.

You could also prevent dragging by adding another empty div on top of your image with the same selectDisable class.

Here is a working example:
http://jsfiddle.net/xugy6shd/3/

edited May 03 '19 at 13:26

answered May 06 '11 at 17:43

Piotr Kula

9,597
8
59
85

I don't see how this is really any different than what the asker already tried. He wasn't applying anything to his whole document. He just named the class `.unselectable` instead of `.selectDisable` – Joshua Carmody May 06 '11 at 17:50
Ahh ok then do a jquery $('body').addClass('selectDisable'); But that is not recommended to apply select none to the whole BODY like i mentioned in my answer- APPLY TO AN ELEMENT ONLY – Piotr Kula May 06 '11 at 17:53
1

Dragging is not the same as selection. Selection is when you drag in the text around the image and the image turns blue (from the selection colour) but when you just click and drag the image that is draggable.. but not selectable. I just checked it and it does what its supposed to. Unless you are using some non standard browser? I updated the jsfiddle for your consideration.. – Piotr Kula May 03 '19 at 13:26

score 16 · Answer 2 · edited Sep 18 '19 at 21:49

16

draggable="false" worked for me

edited Sep 18 '19 at 21:49

Dharman

30,962
25
85
135

answered Sep 18 '19 at 15:43

Stephen Poole

159
1
2

score 6 · Answer 3 · edited May 06 '11 at 19:10

6

If you load image as div's background you can't select it.

EDIT

 <div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>

edited May 06 '11 at 19:10

Piotr Kula

9,597
8
59
85

answered May 06 '11 at 18:24

pmaruszczyk

2,157
2
24
49

Its true- but there could be other sideeffect of this.. but next time add some code! – Piotr Kula May 06 '11 at 18:58

score 2 · Answer 4 · answered May 06 '11 at 18:07

2

If you are using jQuery I've written a tiny jQuery plugin - wrapper that does pretty much what ppumkin wrote:

(plugin is in js part along with an example usage) http://jsfiddle.net/gryzzly/HtvB8/

answered May 06 '11 at 18:07

Misha Reyzlin

13,736
4
54
63

1

why make a plugin if all you need is apply a style. and your plugin has an ugly side effect.. if i try to select in webkit it drags the wrapped container. – Piotr Kula May 06 '11 at 18:54
for me it doesn't happen – not in chrome and not in safari. – i'm on OS X. did you test on windows? – Misha Reyzlin May 07 '11 at 10:38
thats is interesting. i never tested it in Mac Safari- Only Win Safari and it was OK.. also Chrome = Safari ie webkit engine.. so I am not sure.. – Piotr Kula May 07 '11 at 10:42
script is needed because of IE < 9 "onselect" attribute http://msdn.microsoft.com/en-us/library/ms537840%28VS.85%29.aspx – using the script (i haven't written it just to reply to this question :-) ) you can cover all major browsers. essentially this script applies the same CSS you wrote for modern browsers, I don't see how the effect would be different from what applying a class. – Misha Reyzlin May 07 '11 at 10:44
1

fair enough - i would show you what i don't like- but I cant be asked making a movie =) Good work any way. – Piotr Kula May 07 '11 at 10:47

score 0 · Answer 5 · answered Apr 27 '23 at 06:28

0

*.unselectable {
            pointer-events: none;
        }

How about just try adding the pointer events property to the unselectable

answered Apr 27 '23 at 06:28

Emmanuel Maurice

27
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 28 '23 at 13:57

Preventing images and text to be selected

5 Answers5

Linked