jcrop turns transparent image black

Question

I would like to use jcrop to select an area on something that has built in javascript which I can't modify. This javascript is interfering with jcrop i think. so I tried putting a transparent gif over the top of the thing I would like to select. This stopped the thing underneath interfering with jcrop and I coudl select areas fine. Jcrop, however, is making the transparent image black rather than transparent. Here is a jsfiddle http://jsfiddle.net/andieje/rvTmX/ This is the html ```

``` This just shows a transparent image linked to jcrop and how it becomes black. Is there any way I could work around this? I dont know much css but I'm not bothered if the modifcation means that the unselected ar…

Accepted Answer

That is because the default option for `bgColor` in jCrop is set to 'black'.

Just add the option for `bgColor` in your init to be nothing and your image will be transparent:

```
 $('#transparent').Jcrop({
    onChange: showCoords,
    bgColor: ''
},function(){
    jcrop_api = this;
});
```

jcrop turns transparent image black

Solution

Problem