CODEWITHSUNDEEP
htmlcss
Freesnöw
Freesnöw

Reputation: 32163

Preventing images and text to be selected

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?

Upvotes: 26

Views: 63974

Answers (5)

Emmanuel Maurice
Emmanuel Maurice

Reputation: 65

*.unselectable {
            pointer-events: none;
        }

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

Upvotes: 3

Stephen Poole
Stephen Poole

Reputation: 189

draggable="false" worked for me

Upvotes: 19

Piotr Kula
Piotr Kula

Reputation: 9841

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/

Upvotes: 51

pmaruszczyk
pmaruszczyk

Reputation: 2165

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>

Upvotes: 7

Misha Reyzlin
Misha Reyzlin

Reputation: 13916

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/

Upvotes: 2

Related Questions