Hi John

I’m just curious: were is the picture stored (static resource, external server)?
It might be that the image can’t be found and therefore doesn’t get displayed.

Cheers

John, to which element is the “.custom-checkbox” class applied?
In order to do this you’d need to set the image on the parent - ideally a “label” element - and hide the checkbox field. The reason I say ideally is because then it will work out of the box whereas if you use any other element you may need to run some javascript to check the box.

Here’s a sample custom renderer (inline snippet) that you can use in order to add a “label” wrapper tag:

var $ = skuid&#46;$, field = arguments[0], value = arguments[1]; skuid&#46;ui&#46;fieldRenderers[field&#46;metadata&#46;displaytype][field&#46;mode](field,value); var chk = $('input[type=checkbox]', field&#46;element); $('<label class="custom-checkbox">')&#46;append(chk)&#46;appendTo(field&#46;element); 

you can then add styles similar to:

label.custom-checkbox {background:#000;} .nx-editor label.custom-checkbox input[type=checkbox] {visibility:hidden;} 

Putting the background image into the .custom-checkbox class and hiding the checkbox did the trick. Thanks!