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:开发者_Python百科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?

---

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/

---

draggable="false" worked for me

---

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>

---

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/