Question

I have a script that changes the background color of the div when a file is dragged over it, however I would like to change it so that the background image changes e.g.An image with the world ‘Drop your file’

Here is the code I have to work with so far.

function dragover(e)
{
   e.stopPropagation(); 
   e.preventDefault();

f('.dropable').css({
    backgroundColor : 'rgb(51, 51, 51)',
    border : 0,
});

}

I have tried, but it didn’t seem to work.

function dragover(e)
{
e.stopPropagation(); 
e.preventDefault();

f('.dropable').css({
    backgroundColor : 'rgb(51, 51, 51)',
    border : 0,
    backgroundImage','url(uploadimg.png)
});
}

Answer 1

You could use a combination of a classname (e.g. dragover) and .addClass().

​.dragover {
    background-color : rgb(51, 51, 51);
    border: 0;
    background-image: url(uploadimg.png);
}​

var dragover = function(e) {
    e.stopPropagation();
    e.preventDefault();
    f(".dropable").addClass("dragover");
}​

I don’t know why are you using f(...), but I left it as is. Normally, I would use $(...).

---

Having said that if you still want to go with .css(). You can do it using the following syntax:

var dragover = function(e) {
    e.stopPropagation();
    e.preventDefault();
    f(".dropable").css({
        backgroundColor: "rgb(51, 51, 51)",
        border: 0,
        backgroundImage: "url(uploadimg.png)"
    });
}